React useState更新顶层组件值后TodoList子组件未重新渲染如何解决

你遇到的TodoList不自动重渲染问题存在两个核心错误，按以下步骤修改即可修复：

错误1：App组件未正确传递状态更新函数 #

你给CreateTodo组件传递updatePosts时用了错误的写法：

// 错误写法
<CreateTodo todoList={posts} updatePosts = { () => updatePosts } />

这里你传递的是一个返回setter函数的匿名函数，调用时并没有真正执行状态更新操作，直接改成传递setter本身即可：

// 正确写法
<CreateTodo todoList={posts} updatePosts={updatePosts} />

错误2：更新状态时直接修改原数组 #

React的useState采用浅比较判断状态是否变更，如果你直接修改原数组的内容（比如调用push），数组的引用地址没有变化，React会认为状态没有更新，不会触发重渲染。
修改CreateTodo组件中addTodo函数的更新逻辑，不要直接修改原数组：

// 错误写法
todoList.push(newTodo);
updatePosts(todoList);

// 正确写法：生成新数组再更新状态
const newTodoList = [...todoList, newTodo]
updatePosts(newTodoList)

补充说明 #

你之前点击test按钮能打印出新增的待办，是因为你直接修改了原数组的内容，但是React没有感知到状态变更，所以不会触发组件重渲染，只有热重载的时候才会读取最新的数组内容渲染页面。

内容的提问来源于stack exchange，提问作者bbotezatu