React任务管理器提交后任务无法显示的问题求助

关键排查点 #

• props传递是否正确
  确认MyForm调用Task组件时，把tasks数组准确传过去，比如写<Task tasks={tasks} />，别把props名拼错（比如写成task）。在Task组件里先console.log(props.tasks)，看看有没有拿到数据，要是显示undefined，就是传递环节出问题了。

• 数组映射逻辑有没有错
  Task组件里映射tasks的代码要规范，比如：

  // Task.jsx 里的正确写法示例
  export default function Task({ tasks }) {
    return (
      <div>
        {tasks.map((task, idx) => (
          <div key={idx} /* 后续加CSS类 */>
            <h3>{task.title}</h3>
            <p>{task.description}</p>
            {/* 这里要对应你formData里的字段名 */}
          </div>
        ))}
      </div>
    );
  }
  

  注意每个映射的子元素必须加唯一key，还有字段名要和表单里的formData完全一致（比如表单存的是taskTitle，就不能写成title）。

• state更新是否符合React规则
  MyForm里添加任务时，必须用新数组更新state，不能直接修改原数组：

  // 正确的更新方式
  const handleSubmit = (e) => {
    e.preventDefault();
    setTasks(prev => [...prev, formData]);
    // 清空表单
    setFormData({ title: '', description: '' });
  };
  

  要是用tasks.push(formData)这种写法，React不会触发重新渲染，自然看不到新任务。

• 清理无用state
  你提到的isSubmitted状态如果没用就删掉，别让它干扰逻辑。

快速验证步骤 #

1. 提交任务后在MyForm里console.log(tasks)，确认数组确实新增了任务对象。
2. 在Task组件最外层先写个固定文本（比如<p>任务列表</p>），看看组件本身有没有被渲染出来。
3. 要是固定文本能显示但任务不出来，要么tasks是空数组，要么映射时字段名不匹配。

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