如何通過 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>