為什么 React 只保存陣列中的最后一個元素？我有兩個元素，映射它們，每次只有最后一個元素放在鉤子中。
React.useEffect(() => {
if (bearbeiten) {
handleClickUserList(bearbeiten.user);
setBeschreibung(bearbeiten.beschreibung);
setKontaktNamenData([]);
{
bearbeiten.freunde?.map((freund) => {
setKontaktNamenData([...kontaktNamenData, freund.id]);
});
}
}
}, [bearbeiten]);
傳遞的陣列包含兩個 Friends 型別的物件：
但是，在保存時，僅顯示或接受掛鉤陣列中的最后一個元素：
uj5u.com熱心網友回復：
您的變數的當前值不會在回圈的同一迭代中更新，因此您的呼叫使用的是觸發此效果setKontaktNamenData的單個值。kontaktNamenData然后，您每次都將狀態變數設定為一個新值，因此第二個setKontaktNamenData將覆寫第一個。最好先映射您的值，然后使用整個映射陣列設定狀態變數。您也不需要先將其設定為空陣列，這實際上會混淆組件中依賴kontaktNamenData. 您的效果的當前狀態需要kontaktNamenData是一個依賴項，但您不希望從效果內設定一個值的依賴項，因為它會觸發無限回圈。
React.useEffect(() => {
if (bearbeiten) {
handleClickUserList(bearbeiten.user);
setBeschreibung(bearbeiten.beschreibung);
var ids = bearbeiten.freunde?.map((freund) => freund.id);
setKontaktNamenData(ids);
}
}, [bearbeiten]);
如果您確實需要狀態變數的舊值，請在設定新值時使用回呼，而不是顯式呼叫名稱：
setKontaktNamenData(previousValue => previousValue.concat(newValue))
uj5u.com熱心網友回復：
您在回圈中將狀態更新排入佇列，但忽略了使用功能狀態更新。這意味著kontaktNamenData每次使用來自外殼的相同電流。每個入隊狀態更新都會覆寫上一個更新，因此最后處理的更新是下一個渲染周期的值。
功能狀態更新將從以前的狀態正確更新，而不是來自機箱的陳舊值。
例子：
React.useEffect(() => {
if (bearbeiten) {
handleClickUserList(bearbeiten.user);
setBeschreibung(bearbeiten.beschreibung);
setKontaktNamenData([]);
bearbeiten.freunde?.map((freund) => {
setKontaktNamenData(kontaktNamenData => [
...kontaktNamenData,
freund.id
]);
});
}
}, [bearbeiten]);
或者，您可以將單個狀態更新排入佇列并將朋友映射移動到功能狀態更新中。
例子：
React.useEffect(() => {
if (bearbeiten) {
handleClickUserList(bearbeiten.user);
setBeschreibung(bearbeiten.beschreibung);
setKontaktNamenData((bearbeiten.freunde || []).map((freund) => freund.id));
}
}, [bearbeiten]);
uj5u.com熱心網友回復：
這是你要求的嗎？
React.useEffect(() => {
if (bearbeiten) {
handleClickUserList(bearbeiten.user);
setKontaktNamenData(o => [...o, ..._.pluck(bearbeiten.freunde, 'id')]);
}
}, [bearbeiten]);
我洗掉了幾行，因為在我看來它們沒有意義。例子
// Setting this doesnt make sense because just after it you have written following.
setKontaktNamenData([]);
...
-> setKontaktNamenData([...kontaktNamenData, freund.id]);
我已根據對您所問內容的最佳理解更新了您的代碼。有兩件事在計數。1. 低重渲染和 2. DRY Clean
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/475832.html
標籤：javascript 反应 反应式 反应钩子 使用状态