我正在撰寫一個 React 頁面，該頁面顯示由外部 API 獲取的測驗串列。同時，我的頁面有一個“新測驗”按鈕，它會打開一個對話框，其中包含一個供用戶配置和創建新測驗的表單。
問題是：我不確定如何在 POST 請求完成后重新渲染我的表。在玩弄了 useEffect() 的第二個引數之后，我最終面臨兩種情況：
- POST 后重新渲染表，但 useEffect 進入無限回圈
- useEffect 不會進入無限回圈，但表不會重新渲染
這是我的代碼：
const handleSubmit = () => {
setLoading(true);
const body = {
name: newQuizName,
collectionId: newQuizCollection,
length: newQuizLength,
estimator: newQuizEstimator,
survey: newQuizSurvey
}
axios.post(quizzes_api, body).then(res => console.log(res));
fetchQuizzes();
resetDialog();
setLoading(false);
}
const quizzes_api = `http://localhost:5000/quizzes`;
const pools_api = `http://localhost:5000/pools`;
const fetchQuizzes = () => {
axios.get(quizzes_api).then(res => setQuizzes(res.data));
}
const fetchPools = () => {
axios.get(pools_api).then(res => setPools(res.data))
}
useEffect(() => {
fetchQuizzes();
fetchPools();
}, [])
由于這里使用的第二個引數是 []，它是不重新渲染的版本。我試過放【測驗】，解決了前端的問題；但是我的燒瓶服務器被 GET 請求淹沒了。
我還會注意到，這與此執行緒中的問題非常相似：React useEffect 導致無限回圈
但是，我無法使用那里提供的解決方案來解決問題。
任何見解將不勝感激。
編輯：對于未來可能遇到同樣問題并像我一樣在 async/await VS Promise.then() 行為之間感到困惑的讀者（我認為它們可以互換使用），此參考可能會有所幫助：https : //stackoverflow.com /a/68987830/11637379
uj5u.com熱心網友回復：
const handleSubmit = () => {
setLoading(true);
const body = {
name: newQuizName,
collectionId: newQuizCollection,
length: newQuizLength,
estimator: newQuizEstimator,
survey: newQuizSurvey
}
axios.post(quizzes_api, body).then(res => console.log(res));
fetchQuizzes();
resetDialog();
setLoading(false);
}
在這里，您在發布請求完成之前獲取，因此您沒有獲得更新的結果。僅在帖子完成后使用async await和運行fetchQuizzes。
此外，useEffect只要依賴陣列中的任何內容發生變化，就會運行......因此，如果您從 內部更改某些依賴項useEffect，它將導致無限回圈
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/394549.html
標籤：javascript 反应 使用效果