реагировать, отсутствует уникальный ключ для итерации карты

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

пс. У вас может быть еще один div, чем вам нужно