React从嵌套JSON API取数报错：data.map is not a function

错误原因 #

map是数组的专属方法，出现这个错误说明你的data变量不是数组。大概率是API返回的不是直接的数组，而是一个包含数组的对象，你直接把整个返回对象赋值给了data，导致后续调用data.map时报错。

解决方案步骤 #

• 确认API返回结构：在then((jsonData) => { ... })中添加console.log(jsonData)，查看实际返回的JSON格式。比如可能是外层对象嵌套数组的结构：

  {
    "users": [
      {"list": {"id": 1, "name": "xxx", "ssid": "xxx"}},
      {"list": {"id": 2, "name": "yyy", "ssid": "yyy"}}
    ]
  }
  

• 调整赋值逻辑：根据实际结构提取数组字段赋值给data，比如数组在jsonData.users里，就写成setData(jsonData.users)；如果数组字段名不同，对应修改即可。
• 优化初始状态（可选）：把useState(null)改成useState([])，这样即使API返回异常，data也是空数组，不会触发map调用错误，同时可以去掉data &&的判断。

修改后的示例代码 #

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

const FetchNestedJson = () => {
const [data, setData] = useState([]); // 初始化为空数组
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
  fetch('https://my-api')
    .then((response) => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    })
    .then((jsonData) => {
      // 假设数组在jsonData.users字段下，根据实际返回结构修改
      setData(jsonData.users || []); // 兜底处理，避免字段不存在时赋值undefined
      setLoading(false);
    })
    .catch((err) => {
      setError(err.message);
      setLoading(false);
    });
}, []);

if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error}</p>;

return (
  <div>
    <h1>Users</h1>
    {data.map((user) => (
      <div key={user.list.id}>
        <p>{user?.list?.name}</p> {/* 可选链避免字段不存在报错 */}
        <p>{user?.list?.ssid}</p> 
      </div>
    ))}
  </div>
);
};

export default FetchNestedJson;

额外注意事项 #

• 确保key的唯一性：如果user.list.id不是唯一值，需要更换成数据中唯一的标识字段。
• 可选链的使用：用user?.list?.name代替直接取值，避免因数据缺失导致的额外报错。

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