我正在運行一個 Flask 后端和一個 React 前端。根據前端的某些選項，從后端獲取資料并回傳到前端。發生的一件事是，當頁面加載時，有一個默認狀態，它從一開始就回傳一些資料。
回傳的東西之一是 5 個長度為 24 的陣列。我可以從后端看到它們的樣子，并且沒有問題。然后，如果我切換默認狀態（導致回傳不同的資料），后端應該改為回傳 5 個長度為 48 而不是 24 的陣列，即相同型別的物件但長度不同。
但是，它在那里停止作業。當我從 48 到 24 長度時，沒有問題，但是當我從 24 到 48 時它停止，并且我收到一個Uncaught TypeError: Cannot read properties of undefined (reading '1')錯誤。我可以在后端看到它回傳 5 個長度為 48 的陣列，但在前端，如果我對陣列長度進行控制臺日志，第一個陣列的長度是 48，但接下來的 4 個只有 24。所以它似乎更新前端資料的狀態存在一些問題。
我通過以下方式獲取資料：
function fetchData(e) {
e?.preventDefault();
POST('/api', { data1: data1, data2: data2, data3: data3, data4: data4, data5: data5 }).then(
async (response) => {
const json = await response.json()
setData1(json.data1)
setData2(json.data2)
setData3(json.data3)
setData4(json.data4)
setData5(json.data5)
}
)
}
其中useStates定義為：
const [data1, setData1] = useState([]);
const [data2, setData2] = useState([]);
const [data3, setData3] = useState([]);
const [data4, setData4] = useState([]);
const [data5, setData5] = useState([]);
那么任何人都可以發現我可能做錯了什么嗎？
uj5u.com熱心網友回復：
也許如果你在每個 setstate 中使用 await 你會得到更好的結果，這不是最佳實踐，但應該做的作業：
function fetchData(e) {
e?.preventDefault();
POST('/api', { data1: data1, data2: data2, data3: data3, data4: data4, data5: data5 }).then(
async (response) => {
const json = await response.json()
await setData1(json.data1)
await setData2(json.data2)
await setData3(json.data3)
await setData4(json.data4)
await setData5(json.data5)
}
)
}
編輯 1
根據評論，您應該按如下方式更改資料結構：
function fetchData(e) {
e?.preventDefault();
POST('/api', data).then(
async (response) => {
const json = await response.json()
setData(json)
}
)
}
您仍然擁有所有資料，并且可以使用data.data1. 如您所見，要呼叫 API，您只需要資料物件，而無需對其進行解構。
uj5u.com熱心網友回復：
我能想到的第一個是：
setCount(count 1);
setCount((prevCount) => prevCount 1)
在第一行我們正在更新狀態，但我們不確定它什么時候會被更新，另一方面，在第二行我們使用 setter 提供的回呼，這就是我們確定我們將要更新的方式獲取更新的值。
因此，它useState()是異步的，無法確認資料將按照您將其放入代碼中的順序進行更新。這就是這里的問題。
如需深入解釋，請查看參考文獻：
https :
//reactjs.org/docs/hooks-state.html 為什么 reactjs 中的 setState 是異步而不是同步？
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/420862.html
標籤：
上一篇：回圈遍歷陣列并根據元素組合陣列
下一篇：具有2個陣列集的過濾器功能