状态更新后UI未刷新：父子组件传函数更新父组件状态问题

你遇到的UI不更新问题，核心原因是直接修改了原状态数组的引用，没有创建新的数组实例。

React的useState依赖状态的引用变化来触发组件重新渲染。你代码里var temp = todos只是把原数组的引用赋值给了temp，修改temp里的元素本质上是在修改原状态数组，之后调用setTodos(temp)时传递的还是同一个数组引用，React会认为状态没有变化，所以不会更新UI。

正确的实现方式 #

方式一：创建数组副本后修改

const [todos, setTodos] = useState([]);
const updateTodoInUiAfterEdit = (updatedTodo, todoIdOfEdited)=>{
    // 用展开运算符创建原数组的浅拷贝
    const temp = [...todos];
    for(let i = 0; i < temp.length; i++){
        if(temp[i].todo_id === todoIdOfEdited){
            // 同时创建目标对象的副本，避免修改原对象引用
            temp[i] = {...temp[i], description: updatedTodo};
            break;
        }
    }
    setTodos(temp);
}

方式二：使用map函数更简洁（推荐）

利用数组的map方法返回新数组，同时对目标对象做不可变修改：

const [todos, setTodos] = useState([]);
const updateTodoInUiAfterEdit = (updatedTodo, todoIdOfEdited)=>{
    const updatedTodos = todos.map(todo => 
        todo.todo_id === todoIdOfEdited 
            ? {...todo, description: updatedTodo} 
            : todo
    );
    setTodos(updatedTodos);
}

另外补充：你代码里的console.log(todos)可能会打印更新前的状态，因为setState是异步操作，如果要查看最新状态，可以用useEffect监听todos变化再打印。

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