反应钩子更新 state 问题

Question

我的应用程序将“板”的整个 state 存储在板组件中，即useState 。 然后我用 map 和 state 来创建列表。

当我尝试通过axios调用删除列表，然后从我的 state 中拼接该列表时，我遇到了一个问题。 目标列表没有被删除，而是板的最后一个列表被删除。 这是该问题的快速屏幕记录： https://streamable.com/uarb97

正如您从警报中看到的那样，一切都按预期进行。 我不明白为什么要拼接错误的列表。 这是我的 handleDelete function 从板组件传递到每个列表组件：

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 function 以使用 setState function，但我遇到了同样的问题：

        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的副本并对其进行拼接，然后构建您的 newBoard，您将不会改变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