不知何故，我的 fetch 只會每秒鐘觸發一次，我從串列中選擇一個專案：
export default function App() {
...
useEffect(() => {
fetchBookData(books).then((payload) => setPayload(payload));
}, [books]);
const fetchBooksBySubject = () => {
const options = {
method: `GET`,
};
fetch(`${server}/books?subjects_like=${selectedValue}`, options)
.then((response) => {
if(response.ok){
return response.json().then(setBookList)
}
throw new Error('Api is not available')
})
.catch(error => {
console.error('Error fetching data: ', error)
setError(error)
})
}
const handleChange = e => {
setSelectedValue(e);
fetchBooksBySubject();
};
if (!payload) {
return <div>Please start the server</div>;
}
console.log(bookList)
return (
<div className="bg-blue-200">
<div className="container mx-auto py-36 bg-blue-200">
<div className="mt-12 px-96">
<SubjectSelector
options={payload}
selectedVal={selectedValue}
handleChange={handleChange}/>
<ShowcaseBooks selectedVal={selectedValue} />
<ul>
{bookList?.map((item) => {
return(
<li>{item.title}</li>
)
}
)}
</ul>
</div>
</div>
</div>
)
}
所以 fetchBooksBySubject 首先將 bookList 作為 emty 陣列提供，然后正確記錄，但是我必須選擇兩次才能看到<li>{item.title}</li>更新。為什么會這樣以及如何解決？
uj5u.com熱心網友回復：
在您selectedValue呼叫fetchBooksBySubject. 發生這種情況是因為setSelectedValue不會立即更新關聯的值。
結果，fetch(`${server}/books?subjects_like=${selectedValue}`, options)得到一個舊值。
你可以用 ie useEffect hook 來修復它：
useEffect(() => {
fetchBooksBySubject();
}, [selectedValue])
而不是fetchBooksBySubject在回呼中立即呼叫
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/475015.html
標籤：反应
上一篇：狀態改變渲染前一個狀態React
下一篇：如何優化大陣列比較