我无法访问响应数据。我是这么做的

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function AddFishingTrip() {
    let [pierName, setPierName] = useState(null);
    useEffect(() => {
        axios.get('/').then((response) => {
            setPierName(response.data);
          });
    },[]);
    console.log(pierName);
    return (<div>{pierName && pierName.map((i) => <p>{i.fields.name}</p>)}</div>);

字符串
我正在使用axios获取响应数据，但无法访问它。这是响应数据的照片。

的数据
我尝试了以下方法来访问码头的名称和一堆其他奇怪的组合：
pierName.records[0].fields.name、pierName[0].fields.name
我不明白什么？
当我试图MappierName时，我得到一个错误，这表明它不是一个数组。pierName.map is not a function我漏掉了一些关键的概念