反应，缺少地图迭代的唯一键答案

【问题标题】：react , missing unique key for map iteration反应，缺少地图迭代的唯一键
【发布时间】：2019-03-19 11:27:40
【问题描述】：

我收到一个错误，我缺少用于我的地图迭代的关键道具。在我缺少一个的地方感到困惑。我在地图里面有一张地图。你能帮帮我吗

displayData() {
  const { data, index } = this.state;
  let sortedData = data[index].settings.map((item, id) => {
    const { _init_ } = item.settings;
    return _init_.map((message, index) => {
      const { message_content } = message;

      return message_content === undefined ? null : (
        <>
          <div>
            <div key={index} className="settings-message">
              {message_content}
            </div>
          </div>
          <div>yes</div>
        </>
      );
    });
  });
  return sortedData;
}

【问题讨论】：

将您的密钥添加到父 div
可能还值得注意的是，不建议将迭代的index 用作key 或您的元素，因为当您的数据更改时，这可能会导致React 的差异算法混淆。值得为每次迭代附加一个真正唯一的 ID。

标签： javascript reactjs iterator

【解决方案1】：

键应该在父 div 上。

return message_content === undefined ? null : (
  <div key={index}>
    <div className="settings-message">
      {message_content}
    </div>
  </div>
)

【讨论】：

【解决方案2】：

您的顶级组件需要一个唯一的键。使用显式片段语法并将键添加到片段，

displayData() {
  const { data, index } = this.state;
  let sortedData = data[index].settings.map((item, id) => {
    const { _init_ } = item.settings;
    return _init_.map((message, index) => {
      const { message_content } = message;

      return message_content === undefined ? null : (
        <React.Fragment key={index}>
          <div>
            <div className="settings-message">{message_content}</div>
          </div>
          <div>yes</div>
        </React.Fragment>
      );
    });
  });
  return sortedData;
}

ps。你的 div 可能比实际需要的多一个

【讨论】：