據我了解，您永遠不應該直接在本機反應中改變陣列內的物件，但是說我想更新陣列內的特定物件-但selectedGoal在這種情況下仍保持該物件的相同索引 nr 和位置。我該怎么做？
現在它不斷將其添加到末尾，這使得該專案在被操作時始終顯示在末尾。
const [goals, setGoals] = useState([])
...other code here...
const updatedGoal = [...goals.filter(goal=>goal.id !== selectedGoal.id), selectedGoal]
setGoals(updatedGoal)
嵌套陣列示例：
const addTodoToGoal = (todo, goalListId) =>{
const relevantList = goals.find(list=> list.id === goalListId)
relevantList.todos.push(todo)
const goalsMinusRelevantList = goals.filter((list)=>list.id !== goalListId)
const newGoals=[...goalsMinusRelevantList, relevantList]
setGoals(newGoals)
uj5u.com熱心網友回復：
過濾狀態：
const updatedGoal = goals.filter(item => item.id === id);
setGoals(updatedGoal);
如果要更改串列中的某些內容，則可以使用 map 和 if 三元組來回傳新物件或舊物件：
const updatedGoal = goals.map(item => item.id === id ? {} : item);
setGoals(updatedGoal);
您還可以直接在狀態內部傳遞新值：
setGoals(prev => prev.map(item => item.id === id ? {} : item));
用相同的邏輯過濾：
setGoals(prev => prev.filter(item => item.id === id));
編輯
在您的代碼案例中，您正在過濾與 id 不匹配的目標，并將 selectedGoal 放在串列的末尾：
const updatedGoal = [...goals.filter(goal=>goal.id !== selectedGoal.id), selectedGoal]
如果你想更新一個特定的專案，你應該像我的例子一樣嘗試map關鍵字，在地圖內你可以匹配 selectedId 并更改物件，如下所示：
const updatedGoal = goals.map(item => item.id === selectedGoal.id
? ({
...item, // this keep attributes you dont want to change
done: true, // here you can change other attributes
foo: "bar",
})
: item);
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/429492.html
標籤：反应式