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

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

Answer 2

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

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

Answer 3

这可能是有问题的，因为您的map函数在promise解决之前就已被调用，并且您获取了数据。

为避免这种情况，请在迭代之前检查'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 4

尝试

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

如何在React中通过对象数组.map（）

4 个答案: