列表中的子元素缺少键，尽管已分配答案

【问题标题】：Missing key for a child element in a list, although assigned列表中的子元素缺少键，尽管已分配
【发布时间】：2021-09-18 01:49:17
【问题描述】：

我有以下单个任务（待办事项）<li> 元素被渲染并返回：

class TaskContainer extends React.Component {
  render() {
    return (
      <li className="task-container" key={Date.now()}>
        <DeleteTaskButton />
        <Task text={this.props.text} />
      </li>
    );
  }
}

但是，这是返回的元素，没有关联的键：

<li class="task-container">

似乎它没有分配“key”属性。
我可能在这里遗漏了一些东西，请告诉我为什么这不起作用？
提前感谢您的宝贵时间！

【问题讨论】：

Key 不是 React 输出的一部分
谢谢@squillman！

标签： html reactjs

【解决方案1】：

key 是一个内部反应属性，用于帮助重新渲染组件。它不会显示在 DOM 中。如果需要将其附加到元素，请使用其他属性。

Here is a more in depth answer

【讨论】：

谢谢@Hozeis！这部分解决了我的问题，我仍然必须创建一个“key”道具，因为我收到一条警告消息，提示子列表元素中缺少键。我使用带有“id”属性的不同唯一 id 来跟踪元素。

【解决方案2】：

我想我明白了。
我提取了一个组件并尝试分配一个显式键。
相反，我应该用<TaskContainer key={some_key}/> 分配密钥
This 解决了我的问题。

【讨论】：