Предупреждение о ключе React Leaflet

Question

У меня есть функция, которая выполняет итерацию по массиву, захватывает все данные маркеров, а затем помещает их в компонент Map. React постоянно предупреждает меня, что у каждого ребенка должен быть ключ. Leaflet генерирует дополнительных дочерних элементов для каждого маркера. У меня нет никакого контроля над этими дополнительными дочерними элементами.

Вот этот раздел кода

{
  this.state.markers.map((content, idx) => (
    <>
      <Marker
        key={`marker-${idx}`}
        icon={content["icon"]}
        position={content["position"]}
      >
        <Popup
          key={`popup-${idx}`}
          closeButton={false}
          className={styles.popup}
        >
          <span>{content["popupText"]}</span>
        </Popup>
      </Marker>
      {content["radius"] && (
        <Circle
          key={`circle-${idx}`}
          center={content["position"]}
          radius={content["radius"]}
          color={content["color"]}
        ></Circle>
      )}
    </>
  ));
}

Массив маркеров генерируется функцией, которая получает данные из firebase.

firebase.firestore().collection('markers').get().then(async (snap) => {
    snap.forEach((marker) => {
        this.state.markers.push({
            position: marker.data()['position'],
            icon: this.state.icons[marker.data()['icon']][0],
            color: this.state.icons[marker.data()['icon']][1],
            popupText: marker.data()['popupText'],
            radius: marker.data()['radius']
        })
    })
}

Answer 1

Ключи React должны быть на внешнем узле, возвращаемом функцией сопоставления, и их нельзя добавить к сокращению фрагмента, это должен быть фактический компонент. Другие ключи, используемые во вложенных компонентах, не служат никакой цели с точки зрения реагирования, поэтому вы, вероятно, можете их удалить.

Списки и ключи

{
  this.state.markers.map((content, idx) => (
    <Fragment key={/* some unique key value */}> // <-- use key here!
      <Marker
        key={`marker-${idx}`}
        icon={content["icon"]}
        position={content["position"]}
      >
        <Popup
          key={`popup-${idx}`}
          closeButton={false}
          className={styles.popup}
        >
          <span>{content["popupText"]}</span>
        </Popup>
      </Marker>
      {content["radius"] && (
        <Circle
          key={`circle-${idx}`}
          center={content["position"]}
          radius={content["radius"]}
          color={content["color"]}
        />
      )}
    </Fragment>
  ));
}

Примечание: также не рекомендуется использовать индекс массива как часть ключа, если только вы не знаете массив стабильный, т. Е. Никаких добавлений / удалений и повторных операций порядки между рендерами.