javascript - 无法显示 State 属性中保存的内容，但可以显示我添加到其中的内容 - ReactJS

Question

请在 this link 找到我的代码

在看完教程后，我正在自己编写一个简单的待办事项列表(基本上是粗略的)，以便我可以正确掌握 React。

在尝试了代码之后，我最终得到了显示预先填充的任务列表的位置 - 但我无法向列表中添加任何内容。

现在，我可以将内容添加到列表中(这很好) - 但我似乎无法显示列表中预先填充的项目(这很糟糕)。

我觉得我的罪魁祸首如下，但我不确定发生了什么:

列表正文

displayTasks() {
    return this.props.tasks.map((task, index) =>
      <ListItem key={index} {...task} />
    );
  }

  listTasks() {
    console.log(this.props.tasks);
  }

  render() {
    return(
      <div>
        <button onClick={this.listTasks.bind(this)}>list</button>
        {this.displayTasks()}

      </div>
    )
  }

列表项

render() {
    return (
      <div>
        {this.props.task}
      </div>
    )
  }

更新

经过进一步调查 - 我为每个条目创建了一个编辑/删除按钮 - 我发现列表中的 3 个预先填充的任务实际上显示了按钮，但没有显示任务本身的文本...

Answer 1

当您看起来只想设置一个 task 属性时，您正在将所有 task 属性分散到 ListItem 上。试试这个:

<ListItem key={index} task={task} />