Question

我遇到一个错误，我错过了地图迭代的关键道具。我的地图里面有地图。能帮我

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;
}

Answer 1

键应位于父div上。

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

Answer 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可能会比实际需要多

react，缺少地图迭代的唯一键

2 个答案: