Hooks從孫子創建的Change祖父母狀態上的結果是否混淆？

Question

我試圖將孫代的grandParent狀態更改，我知道我應該將某種方法傳遞給孫子組件，嘗試之后，結果令人困惑。

如果我像GrandParent ---> Parent ---> Child這樣一步一步地通過方法，結果將是預期的。

所以問題來了：為什么會發生這種情況？

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

我希望一旦單擊添加的每個項目：

• 在項目后面添加紅色的“ +”（此UI更改僅作為示例），並且
• 將當前狀態正確記錄在控制台中，但是紅色“ +”未顯示，因為它不是當前狀態，但看起來像上一個狀態？。

附錄 ：

就像@Antonio所說的那樣，解決方案可能是：

• 在setTodos中 ，我可以使用preTodos進行更新。
• 像我嘗試過的一樣，只需逐步傳遞方法，但不作為孫子組件，也可以解決問題。

而現在，最重要的是：

為什么控制台有不同的結果？

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};
  }));
};

這是codepen 。