javascript - Hooks 从孙子创建的更改祖 parent 状态的结果困惑？

Question

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

如果我像 GrandParent ---> Parent ---> Child 那样一步步传递该方法，结果就是预期的。

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

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

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

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

附加:

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

• 在setTodos中，我可以使用preTodos来更新。
• 就像我尝试过的那样，只要将方法一步步传递下去，但不作为孙子组件，也可以解决问题。

现在，最重要的是:

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

Answer 1

使用 useState Hook 更新数组状态中的对象元素时出现错误。

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

这里是codepen .