React使用Context API添加数组对象后组件数据不更新

问题原因 #

你把todos所在的data对象定义在了TodoProvider函数外部，这是一个普通变量，React不会追踪普通变量的变化。哪怕你在addNewTask里修改了data.todos，React也不会触发组件重新渲染，所以TodoList组件无法感知到数据更新。

修复方案 #

把data改成TodoProvider内部的React状态，用useState来声明和更新：

修改后的TodoProvider代码 #

import { useState } from 'react';

export function TodoProvider({ children }) {    
    // 用useState把data变成组件状态
    const [data, setData] = useState({
        todos: [...], // 这里放你的初始todos数组
    });

    const addNewTask = (title, setTitle) => {
        let lastId = data.todos.length;
        // 使用函数式更新确保拿到最新的状态值
        setData(prevData => ({
            ...prevData,
            todos: [...prevData.todos, { title, completed: false, id: lastId + 1 }]
        }));
        setTitle("");
    };

    return (
        <TodoContext.Provider value={{ data, addNewTask }}>
            {children}
        </TodoContext.Provider>
    );
}

TodoList组件无需修改 #

export default function TodoList() {
    const { data } = useContext(TodoContext)

    return (
        <ul>
            {data.todos.length ? (
                data.todos.map((item) => {
                    return <TodoItem {...item} />
                })
            ) : (
                <h2>Nothing in todolist yet</h2>
            )}
        </ul>
    )
}

原理说明 #

• useState是React提供的状态管理钩子，它会让React追踪状态的变化。当调用setData更新状态时，React会重新渲染TodoProvider组件，并更新Context的value。
• TodoList作为Context的消费者，会自动接收到更新后的data，从而重新渲染列表，展示最新的任务。

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