你好，我有這個組件，經過一些閱讀，我不明白當陣列中的資料發生變化時會再次呼叫 useEffect，但在我的情況下，這并沒有改變，我進入了一個回圈。
export default function Test() {
const [dates, setDates] = useState([]);
let values = [];
useEffect(() => {
getAllFilledJournauxDates().then(function(response) {
values = response;
setDates(values);
}
);
}
, [dates]);
console.log(values);
return(
<div>
{dates.map(date => {
return <div>{date}</div>
})}
</div>
);
}
[編輯 2] 添加函式 getAllFilledJournauxDates()
export async function getAllFilledJournauxDates() {
let dates = [];
let journaux = getAllJournaux()
.then(response => {
Object.keys(response).forEach(element => {
dates.push(new Date(new Date(response[element].date)).getFullYear() "-" (new Date(response[element].date)).getMonth() "-" (new Date(response[element].date)).getDate());
})
})
return dates;
}
[編輯]
export default function Test() {
const [dates, setDates] = useState([]);
let values = [];
useEffect(() => {
console.log("useEffect"); // displayed two time in console
getAllFilledJournauxDates().then(function(response) {
values = response;
setDates(values);
console.log(values); //display the array of dates
}
);
}
, []);
console.log(values); // display an empty array
return(
<div>
{dates.map(date => {
return <div>{date}</div> // display nothing on screen
})}
</div>
);
}
就像@rowinbot 建議的那樣，我已經洗掉了陣列中的變數，但螢屏上還沒有，我可以看到變數已填充在我的控制臺中，并且 useEffect 看起來他被呼叫了兩次......我想補充一下起初我嘗試用這些值填充日歷但沒有得到我想要的結果我已經最簡單地呈現結果
uj5u.com熱心網友回復：
TL;DR：您應該dates從效果的依賴陣列中洗掉。
React 上的效果（也就是我們傳遞給useEffect鉤子的函式）在渲染后運行，依賴陣列充當運行效果的逃生艙口，以防您只想在給定渲染中更新某些依賴項后才運行效果。
在這里，您是說，每當dates更新（其值更改）時，您想要運行 Effect 依次呼叫setDates(...)和改變dates值，這會生成組件的渲染，并且由于dates更改，Effect 會再次運行，并且...無限期地發生。
只需dates從依賴陣列中洗掉就可以了：
useEffect(() => {
getAllFilledJournauxDates().then(function(response) {
values = response;
setDates(values);
}
);
}
, []);
只要記住保持依賴陣列即使它是空的，這基本上告訴 React 只運行你的效果“一次”（React 18 的嚴格模式使得這在開發中有點不同）并防止回圈。
完全避免依賴陣列（省略它）將導致相同的結果，一個無限回圈，這告訴 React 在每次渲染時，您想要運行效果，這會導致另一個渲染......并且永遠回圈。
您可以在beta React 檔案中閱讀有關 Effects 的更多資訊，該檔案在總結其語意方面做得很好。
uj5u.com熱心網友回復：
您正在更新 useEffect 中的日期，這就是在每次 useEffect 重新運行時更改日期并導致它再次重新運行并創建回圈的方式。嘗試使用其他東西來觸發 useEffect 而不是日期。也許您可以嘗試將其更改為“值”而不是日期，并在 useEffect 之外獲取回應并將其放入值中。
useEffect(() => {
setDates(values);
}
, [values]);
console.log(values);
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/497486.html