我知道有一個空依賴項只[]執行useEffect()一次，但是當它只執行一次并且一個空依賴項時[]- 它會在控制臺中記錄一個空陣列。
當它不為空時，它只是不斷地記錄，看不到盡頭（使用正確的資料）。我不確定為什么它不會只用我需要使用的資料正確記錄一次。
我究竟做錯了什么？
代碼如下：
const [uploadsData, setUploadsData] = useState([]);
const getUploads = async () => {
const headers = {
"Accept": 'application/json',
"Authorization": `Bearer ${authToken}`
}
await axios.get('http://localhost:8000/api/get-uploads', {headers})
.then(resp => {
console.log(resp);
setUploadsData([resp.data]);
}).catch(error => {
console.log(error);
});
};
useEffect(() => {
getUploads();
// logs empty array in the console if dependency array is empty
// logs correct data when dependency array isn't empty - i.e. [uploadsData]
console.log(uploadsData);
}, []);
uj5u.com熱心網友回復：
那是因為您指的uploadsData是useEffect鉤子的回呼內部，為了獲得正確的控制臺日志，您應該在單獨的useEffect鉤子中運行該代碼。
useEffect(() => {
getUploads();
}, []);
useEffect(() => {
// logs empty array in the console if dependency array is empty
// logs correct data when dependency array isn't empty - i.e. [uploadsData]
console.log(uploadsData);
}, [uploadsData]);
這樣，該getUploads函式只被呼叫一次，并正確uploadData地輸出到瀏覽器控制臺。
uj5u.com熱心網友回復：
由于更新狀態在 React 中是異步的，因此第一次將列印空陣列。
鑒于您將 uploadsData 添加到您的依賴項陣列。當您的效果運行時，它會更新 uploadsData 然后效果將再次觸發。
這將永遠持續下去！
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/392823.html
標籤：javascript 反应 调试
上一篇：映射嵌套陣列并回傳匹配的陣列