React Redux待办应用报错：渲染TodoTask时无法更新TodoForm

核心问题分析 #

你遇到的无限重渲染/循环错误，根源有三个：

• TodoTask组件在渲染阶段直接触发Redux dispatch：组件每次渲染都会执行dispatch(todoActions.deleteTask(targetIndex))，导致store状态更新→组件重渲染→再次dispatch，形成无限循环。
• 列表项使用动态生成的uuid作为key：uuidv4()每次渲染都会生成新值，React会认为所有列表项都是新组件，强制重新挂载，既影响性能又加重渲染冲突。
• 任务字段不匹配：Input组件添加任务时用的是label字段，但TodoTask组件里解构的是text，导致任务内容无法正常显示。

代码修正 #

1. 修正TodoTask组件

将删除操作改为点击时才触发，避免渲染阶段执行dispatch：

import { useDispatch } from "react-redux";
import { todoActions } from "../store/todo";

const TodoTask = ({ task, targetIndex }) => {
    // 修正字段匹配：从task.label取值（也可统一改成text字段）
    const { label: text, done } = task;

    const dispatch = useDispatch()
    // 改为点击时才执行dispatch的函数
    const removeTask = () => {
        dispatch(todoActions.deleteTask(targetIndex))
    }

    return (
        <div
            className="alert alert-primary d-flex justify-content-between"
            role="alert"
        >
            {text}
            <button type="button" className="btn-close" onClick={removeTask}></button>
        </div>
    );
};

export default TodoTask;

2. 修正TodoForm组件

改用任务索引（若任务会重排序，建议给每个任务添加唯一id）作为key，避免动态生成uuid：

import { useSelector } from "react-redux";
import TodoTask from "./TodoTask";

const TodoForm = () => {
    const tasks = useSelector((state) => state.todo.taskList);

    const renderedListItems = tasks.map((task, index) => {
        return (
            <TodoTask
                key={index} // 若支持任务重排序，建议给每个任务添加id字段，用task.id作为key
                task={task}
                targetIndex={index}
            />
        );
    });

    return <div className="container">{renderedListItems}</div>;
};

export default TodoForm;

3. 统一任务字段（可选优化）

如果想统一使用text字段，修正Input组件的addTask参数：

// Input组件中handleKeyPress内的dispatch部分
dispatch(
    todoActions.addTask({ text: inputText, done: false })
);
// 同时TodoTask组件中直接解构：const { text, done } = task;

关于之前尝试方法的说明 #

React.memo和shallowEqual只能优化重渲染的触发条件，但无法解决“渲染阶段直接dispatch导致的无限循环”这个核心问题，所以无效。修正上述三个问题后，无需额外添加这两个优化，组件就能正常工作。

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