反应钩子更新状态问题

Question

我的应用程序正在将"板"的整个状态存储在板组件vieuseState中。然后，我映射状态以创建列表。

当我尝试通过axios调用删除列表，然后从我的州拼接该列表时，我遇到了问题。目标列表不会被删除，而是删除了董事会的最后一个列表。以下是该问题的快速屏幕录像：https://streamable.com/uarb97

从警报中可以看出，一切都按预期进行。我不明白为什么拼接错误的列表。这是我从电路板组件传递到每个列表组件的 handleDelete 函数：

const handleDeleteList = (targetList) => {
event.preventDefault();
let newBoard = { ...boardState };
alert(`DELETING ${JSON.stringify(targetList.title)} FROM INDEX ${newBoard.lists.indexOf(targetList)}`)
newBoard.lists.splice(newBoard.lists.indexOf(targetList), 1);
alert(`BOARD WILL NOW HAVE LISTS: ${JSON.stringify(newBoard.lists)}`)
//setState function
setBoardState({ ...newBoard });
console.log("THIS IS THE CURRENT STATE THAT IS BEING MAPPED OVER TO DISPLAY THE LISTS") 
console.log(boardState.lists)
};

编辑：我已经更新了handleDeleteList函数以使用setState函数，但是我遇到了同样的问题：

updateBoardState(oldBoard => {
const newBoard = { ...oldBoard }
newBoard.lists.splice(oldBoard.lists.indexOf(targetList), 1)
return newBoard
})

这是一个渲染问题，还是我错过了一些明显的东西？

Answer 1

问题是：

updateBoardState(oldBoard => {
const newBoard = { ...oldBoard }
newBoard.lists.splice(oldBoard.lists.indexOf(targetList), 1)
return newBoard
})

当你传播oldBoard你正在制作lists的浅拷贝，这意味着：

newBoard.lists.splice(oldBoard.lists.indexOf(targetList), 1)

oldBoard.lists突变，导致 React 感到困惑。

您可以在模拟此问题的代码沙箱中看到这一点：https://codesandbox.io/s/sharp-bush-i4kew 尝试删除多个项目，您将看到它变得越来越不正确。

---

如果你复制lists并在其上进行拼接，然后构建你的新板，你不会oldBoard变异：

updateBoardState(oldBoard => {
const lists = oldBoard.lists.slice();
lists.splice(oldBoard.lists.indexOf(targetList), 1);
return { ...oldBoard, lists };
});

同样，这是具有工作逻辑的相同代码沙箱：https://codesandbox.io/s/confident-mcnulty-h7378