我是新手，不了解 useState 鉤子的一件事：
import {useEffect, useState} from "react";
export default function People() {
const [people, setPeople] = useState(null)
useEffect(() => {
const fetchData = async () => {
const response = await fetch("https://jsonplaceholder.typicode.com/users")
const data = await response.json()
setPeople(data)
}
fetchData()
}, [])
return (
<>
<h1>People:</h1>
<ul>
{people && people.map(({id, name, email, username, phone, website}) => {
return (<div key={id}>
<li><h2>{name}</h2><p>{email}</p></li>
<p>{username}</p>
<p>{phone}</p>
<p>{website}</p>
</div>)
})}
</ul>
</>)
}
為什么當我洗掉“people &&”時出現錯誤：“無法讀取 null 的屬性（讀取 'map'）”。但是當我檢查“人”的存在時，代碼有效。
為什么會這樣？這是鉤子的特性嗎？謝謝！
uj5u.com熱心網友回復：
我對自己的反應很陌生。在我短暫的經驗中，我會說將你的初始狀態設定為一個空陣列將為你解決這個問題。
因為獲取資料是異步發生的。渲染首先嘗試使用 null 值映射人員，這會在重試之前引發錯誤
希望這可以幫助 ：）
uj5u.com熱心網友回復：
您的初始people狀態值為空。由于 react 組件的行為是異步的，因此該.map()方法在 null 上執行。
您可以通過兩種方法解決此問題。
方法一：
people &&
方法 2：將初始值分配為人員狀態的空陣列。
const [people, setPeople] = useState([])
uj5u.com熱心網友回復：
在設定為 null 的 useState 中傳遞 []。因為我們不能回圈遍歷空資料。您的代碼應如下所示：
const [people, setPeople] = useState([])
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/512454.html
下一篇：mongodb中的多級分組