无法从Axios响应中访问嵌套JSON数据的问题求助

错误原因 #

pierName.map is not a function的本质是你调用map的对象不是数组。从描述来看，Axios返回的响应数据是一个包含records数组的对象，但你直接把整个响应对象存入了pierName状态——对象本身没有map方法，所以触发报错。

修复步骤 #

1. 修正状态初始值
   因为最终要遍历的是数组，把初始值设为空数组[]而非null，既符合数据类型预期，也能简化后续判断：

   let [pierName, setPierName] = useState([]);
   

2. 提取正确的数组存入状态
   响应数据里的目标列表在response.data.records中，需要把这个数组赋值给状态：

   useEffect(() => {
       axios.get('/').then((response) => {
           setPierName(response.data.records);
       });
   },[]);
   

3. 正确遍历渲染
   现在pierName是数组，直接用map遍历即可访问fields.name：

   return (
       <div>
           {pierName.map((item, index) => (
               <p key={index}>{item.fields.name}</p>
           ))}
       </div>
   );
   

额外注意 #

• 之前尝试pierName.records[0].fields.name无效，是因为组件初始化时pierName是null，直接访问null.records会触发报错。如果需要临时访问单个元素，可改用可选链：pierName?.records?.[0]?.fields.name，但核心还是要把正确的数组存入状态。
• 尽量避免用index作为map元素的key，如果records里有唯一标识字段（比如id），用它作为key能提升组件渲染性能。

内容的提问来源于stack exchange，提问作者Stephanie