javascript - 由孙子的 Hooks 创建的更改祖父母状态的结果令人困惑？

Question

我正在尝试从孙子更改 grandParent 状态，我知道我应该将一些方法传递给孙子组件，在我尝试之后，结果很混乱。

如果我像 GrandParent ---> Parent ---> Child 那样一步一步地通过方法，结果与预期的一样。

那么问题来了：为什么会发生这种情况？

https://codesandbox.io/s/craky-grass-45ifs

我希望单击添加的每个项目：

• 在项目后面添加一个红色的“+”（此 UI 更改仅作为示例），并且
• 正确记录控制台中的当前状态，但红色“+”没有显示，因为它不是当前状态，但看起来像上一个状态？

附加：

正如@Antonio 所说，解决方案可能是：

• 在setTodos中，我可以使用 preTodos 进行更新。
• 就像我尝试过的那样，只需将方法逐步传递，而不是作为孙子组件，也可以解决问题。

而现在，最重要的是：

为什么控制台有不同的结果？

标签： javascriptreactjs

Answer 1

使用 usState 钩子更新 Array 状态的 Object 元素时出错。

const toggleStarred = text => {
  console.log("toggle: ", todos);
  setTodos((prevTodos) => prevTodos.map((todo) => {
    if (todo.text === text) return {...todo, isStarred: !todo.isStarred}
    return {...todo};
  }));
};

这是代码笔。