如何通过 React 中的对象数组 .map()

Question

我正在尝试映射一些看起来像这样的数据：

[
{
  "id": "cambridgeshire",
  "name": "Cambridgeshire"
},
{
  "id": "bedfordshire",
  "name": "Bedfordshire"
}
]

并将其显示为列表。

我收到 allAreas 的错误未定义。 我有一种感觉是因为我不熟悉 JSON 对象。

在检查 allAreas 的状态时，它显示未定义。

这是我试过的代码

const Directory = () => {
  const [allAreas, setAllAreas] = useState([]);

  useEffect(() => {
    fetchAllAreasData().then((data) => setAllAreas(data));
  }, []);
  return (
    <div className='directory'>
      <ul>
        {allAreas.map((area) => (
          <li key={area.id}>{area.name}</li>
        ))}
      </ul>
    </div>
  );
};

澄清这是一个对象数组

Answer 1

在映射之前确保 allArea 存在。

const Directory = () => {
  const [allAreas, setAllAreas] = useState([]);

  useEffect(() => {
    fetchAllAreasData().then((data) => setAllAreas(data));
  }, []);
  return (
    <div className='directory'>
      <ul>
        {allAreas && allAreas.map((area) => (
          <li key={area.id}>{area.name}</li>
        ))}
      </ul>
    </div>
  );
};

如果您的问题没有解决，请改用 useReducer，因为 useState 中的一些反应问题与有时中的数组有关。像这样：

function reducer(state = [], action) {
 return action;
}

const Directory = () => {
  const [allAreas, dispatch] = useReducer(reducer, []);

  useEffect(() => {
    fetchAllAreasData().then((data) => dispatch(data));
  }, []);
  return (
    <div className='directory'>
      <ul>
        {allAreas.length > 0 && allAreas.map((area) => (
          <li key={area.id}>{area.name}</li>
        ))}
      </ul>
    </div>
  );
}; 

Answer 2

const [allAreas, setAllAreas] = useState([]); // your defaulted state must be [] instead of {}

Answer 3

只需将函数的第一行更改为：

const [allAreas, setAllAreas] = useState([]);

Answer 4

这可能是问题，因为您的 map 函数在承诺解决之前被调用并且您获得数据。

为避免这种情况，请在迭代之前检查'allAreas'的长度。

还有分配给'allAreas'对象而不是数组的初始值。 将初始分配更改为数组。

const Directory = () => {
  const [allAreas, setAllAreas] = useState([]);

  useEffect(() => {
    fetchAllAreasData().then((data) => setAllAreas(data));
  }, []);
  return (
    <div className='directory'>
      <ul>
        {allAreas.lenght && allAreas.map((area) => (
          <li key={area.id}>{area.name}</li>
        ))}
      </ul>
    </div>
  );
};

Answer 5

尝试，

 <ul>
     {allAreas && allAreas.map((area) => (
         <li key={area.id}>{area.name}</li>
     ))}
 </ul>