所以我試圖從我的 API 獲取資料并且我能夠將它登錄到控制臺，但是我無法使用 useState 將它呈現到我的應用程式中。嘗試過類似的東西，它完全忽略了我的 h2。
var id = "61bf209bdb079818ec63d9fd";
const Main = () => {
const [name, setName] = useState("");
const [fromApi, setFromApi] = useState([]);
const getApiData = () => {
fetch('http://localhost:3000/myapi')
.then(res => {
return res.json();
})
.then(data => {
console.log(data);
setFromApi(data);
})
for (var i = 0; i < fromApi.length; i ) {
if (fromApi[i]._id === id) {
setName(fromApi[i].name);
}
}
}
useEffect(() => {
getApiData();
}, [])
return (
<div>
{name && <h2 className='urname'>Your name: {name}</h2>}
</div>
)
}
uj5u.com熱心網友回復：
發生這種情況是因為React 不保證狀態更改會立即應用。這使得在更新后立即讀取狀態（在您的情況下 setFromApi）成為一個潛在的陷阱，并且由于異步性質可能會回傳現有值。
- 呼叫
setState只影響下一次渲染，不會改變已經運行的代碼的狀態
反應檔案：https ://reactjs.org/docs/react-component.html ? #setstate
在您的情況下，您for甚至在fromAPI狀態更新之前使用從 API 接收的資料和運行回圈。而是放入fromAPI依賴陣列useEffect并在for那里執行回圈。
var id = "61bf209bdb079818ec63d9fd";
const Main = () => {
const [name, setName] = useState("");
const [fromApi, setFromApi] = useState([]);
const getApiData = () => {
fetch('http://localhost:3000/myapi')
.then(res => {
return res.json();
})
.then(data => {
console.log(data);
setFromApi(data);
})
}
useEffect(() => {
getApiData();
}, [])
useEffect(() => {
if(fromApi?.length){
for (var i = 0; i < fromApi.length; i ) {
if (fromApi[i]._id === id) {
setName(fromApi[i].name);
}
}
}
}, [fromApi])
return (
<div>
{name && <h2 className='urname'>Your name: {name}</h2>}
</div>
)
}
uj5u.com熱心網友回復：
我會考慮為什么你有兩種狀態fromApi和name？setName一旦資料從 API 回傳，您就可以......類似：
const [name, setName] = useState("");
const getApiData = () => {
fetch('http://localhost:3000/myapi')
.then(res => {
return res.json();
})
.then(data => {
console.log(data);
for (var i = 0; i < data.length; i ) {
if (data[i]._id === id) {
setName(data[i].name);
// Stop the for loop once match has been found
return;
}
}
})
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/386188.html