React Todo列表删除任务后页面不即时更新问题求助

你的代码里有几个关键问题导致删除后页面不更新，逐个解决：

1. 子组件不要维护独立的tasks状态 #

Tasks组件里自己用useState存了一份tasks，这会导致父组件的tasks更新时，子组件的局部状态不会同步。直接用父组件传的props.tasks就行，不需要额外的状态。

2. 删除操作要通知父组件更新数据源 #

删除任务应该让父组件来修改tasks数组，因为父组件是数据源的持有者。子组件只负责触发删除事件，把要删除的任务ID传给父组件。

3. 修改数组时不要直接操作原数组 #

React的状态更新依赖于新的引用，直接用push、splice修改原数组，React无法检测到变化，也就不会触发重新渲染。要创建新数组，比如用filter或者扩展运算符。

4. 给任务添加唯一ID #

原代码里任务没有id，map时用task.id会导致key无效，容易引发渲染异常，给每个任务加个唯一标识。

修复后的form.jsx #

import { useState } from 'react';
import './styles/form.css';
import Tasks from './tasks';

function TaskForm() {
  // 给初始任务加id
  const initialList = [{id: 1, task: 'Do something', done: false}];
  const [tasks, setTasks] = useState(initialList);
  const [input, setInput] = useState('');
  const [validTask, setValidTask] = useState('valid');

  const addTask = () => {
    if(input.trim().length !== 0) {
      setValidTask('valid');
      // 创建新数组，不用push修改原数组
      setTasks([
        ...tasks,
        {
          id: Date.now(), // 用时间戳作为临时唯一id
          task: input,
          done: false
        }
      ]);
      setInput('');
    } else {
      setValidTask('invalid');
    }
  };

  // 父组件的删除方法，传给子组件
  const deleteTask = (taskId) => {
    // 用filter创建新数组，过滤掉要删除的任务
    setTasks(tasks.filter(task => task.id !== taskId));
  };

  return (
    <>
      <div className='maindiv'>
        <p>Task app</p>
        <input 
          maxLength={32} 
          value={input} 
          placeholder='add a new task...' 
          onChange={e => setInput(e.target.value)}
        />
        <br />
        <p style={{color: 'red'}} className={validTask}>Task can't be empty</p>
        <input type='submit' value='Add task' onClick={addTask}/>
      </div>
      {/* 把删除方法传给子组件 */}
      <Tasks tasks={tasks} onDelete={deleteTask}/>
    </>
  );
}

export default TaskForm;

修复后的tasks.jsx #

function Tasks(props) {
  // 不需要自己的tasks状态，直接用props.tasks
  const taskList = props.tasks.map(task => (
    <li key={task.id}>
      <input type='checkbox' checked={task.done} /> 
      {task.task}
      {/* 点击删除时调用父组件传的onDelete方法，传入任务id */}
      <input type='button' value='delete' onClick={() => props.onDelete(task.id)} />
    </li>
  ));

  return <ul>{taskList}</ul>;
}

export default Tasks;

关键修改说明：

• 父组件统一维护tasks状态，子组件只负责渲染和触发删除事件
• 添加任务时用扩展运算符生成新数组，确保状态引用更新
• 删除任务时用filter创建新数组，让React检测到状态变化并触发渲染
• 给每个任务添加唯一ID，避免渲染时的key异常
• 子组件通过调用父组件的删除方法，同步更新数据源，从而实现页面即时刷新

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