React Hooks 显示不一致的行为

Question

我想感受一下反应钩子，并通过制作一个带有添加和删除功能的普通待办事项列表来尝试它们，但我遇到了一种恼人的行为，而且我不知道其背后的逻辑。

 const handleDeleteTodos = (event) => {
    todos.splice(event.target.name, 1);
    setTodos(todos)
    window.localStorage.setItem('Todos', JSON.stringify(todos));
  };

所以上面的代码确实删除了该元素，我知道这一点是因为当我重新加载页面时，该元素就消失了。但它不会像添加待办事项功能那样重新渲染。虽然下面的代码有效。

const handleDeleteTodos = (event) => {
    const newTodos = [...todos];
    newTodos.splice(event.target.name, 1); 
    setTodos(newTodos)
    window.localStorage.setItem('Todos', JSON.stringify(newTodos));
  };

我看到的唯一区别是代码的对象解构方面。

我只是想知道这种行为背后的逻辑是什么。

Answer 1

您看到 过时的道具。

使用setState的函数形式修改对象时无需注意（因为对该对象的引用是由 React 传递给您的）。

const handleDeleteTodos = (event) => {
  const { name } = event.target; // important to copy the name before `setTodos`, since react reuses events
  setTodos((todos) => {
    const newTodos = [...todos];
    newTodos.splice(name, 1);
    return newTodos;
  });
};

另外，使用 useEffect 基于 todos 修改 localStorage，因为它实际上是修改状态的副作用，而不是手动执行各个修改功能。

useEffect(() => {
  window.localStorage.setItem('Todos', JSON.stringify(todos));
}, [todos]);

Answer 2

仅当对状态对象的引用发生更改（或者如果它是标量，则值本身）时，React 才会重新渲染。
您必须创建一个新对象并将其设置为状态。

第一个示例使用相同的引用，因此 React 不知道有什么变化。
第二个示例使用新的引用。

Answer 3

问题

Array.prototype.splice 对数组进行就地突变。

Array.prototype.splice

splice() 方法通过删除或删除数组来更改数组的内容
替换现有元素和/或添加新元素就地。
要访问数组的一部分而不修改它，请参阅 slice()

您正在改变当前状态，然后将相同的引用保存回状态。

const handleDeleteTodos = (event) => {
  todos.splice(event.target.name, 1); // <-- mutation
  setTodos(todos); // <-- same state reference
  window.localStorage.setItem('Todos', JSON.stringify(todos));
};

因为永远不会创建新的数组引用，所以 React 不会看到状态已更新。

解决方案

创建新的数组引用允许 React 使用浅引用相等性检查和重新渲染。

const handleDeleteTodos = (event) => {
  const newTodos = [...todos]; // <-- shallow copy into new reference
  newTodos.splice(event.target.name, 1); // <-- mutate copy
  setTodos(newTodos); // <-- save new reference into state

  window.localStorage.setItem('Todos', JSON.stringify(newTodos));
};

更传统的方法是使用Array.prototype.filter浅复制数组并同时删除元素。

const handleDeleteTodos = (event) => {
  const newTodos = todos.filter((_, index) => event.target.name !== index);

  setTodos(newTodos);

  window.localStorage.setItem('Todos', JSON.stringify(newTodos));
};