ReactJS求助：TodoList预填充任务无法显示但可新增，求排查

看起来你的核心问题出在组件间的props传递逻辑不匹配上，结合你描述的「预填充任务只显示按钮、新增与预填充显示互斥」的现象，我们来拆解并解决：

1. 核心矛盾：传参方式与接收方式不匹配 #

先看你的代码细节：

• 在ListBody的displayTasks方法中，你用<ListItem key={index} {...task} />把task对象的所有属性拆成单独的props传递给ListItem；
• 但在ListItem的render方法里，你试图通过{this.props.task}获取任务文本——这意味着你期望ListItem接收一个名为task的完整props。

举个实际场景的例子：
如果你的预填充任务是对象数组：

const initialTasks = [
  { task: "完成React基础学习" },
  { task: "编写TodoList" },
  { task: "排查显示bug" }
];

此时{...task}展开后，会把task="完成React基础学习"作为单独props传给ListItem，this.props.task能拿到值，预填充任务正常显示；但如果你新增任务时直接存成了字符串（比如tasks.push("新增任务")），那{...task}展开字符串是无效操作，ListItem的this.props.task会变成undefined，自然显示不出文本。

反过来，如果预填充是字符串数组["任务1", "任务2"]，新增任务却存成了对象{task: "新增任务"}，那预填充的字符串通过{...task}传递后，ListItem拿不到this.props.task（字符串没有task属性），就会只显示编辑/删除按钮，看不到任务文本。

2. 两种修复方案 #

你可以任选一种方式统一传参逻辑：

方案一：修改ListItem，适配展开的props #

如果你的task是带具体字段的对象（比如{content: "任务内容", id: 1}），直接在ListItem中使用对应的字段：

// ListItem组件
render() {
  // 替换成你的task对象实际存储文本的字段名，比如content/text
  return (
    <div>
      {this.props.content}
      {/* 编辑/删除按钮代码 */}
    </div>
  )
}

方案二：修改ListBody的传参方式，传递完整task对象 #

保持ListItem的逻辑不变，把整个task作为taskprops传递：

// ListBody组件的displayTasks方法
displayTasks() {
  return this.props.tasks.map((task, index) => <ListItem key={index} task={task} /> );
}

这样不管task是字符串还是对象，ListItem的this.props.task都能拿到正确值：如果是字符串直接显示，如果是对象就取对应字段（比如{this.props.task.content}）。

3. 额外优化建议 #

• 统一tasks数组的元素结构：推荐用对象存储每个任务（比如{id: 1, content: "任务内容", completed: false}），后续编辑、删除功能会更易维护；
• 不要用数组索引作为key：给每个任务生成唯一id（比如Date.now()或者uuid工具），避免列表更新时出现渲染异常。

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