Je connais cet avertissement et je sais ce qu'il signifie, mais je ne le comprends pas ici. J'ai un simple aperçu d'image, l'utilisateur clique sur les boutons fléchés droite / gauche pour afficher de nouvelles images. Je reçois cet avertissement ...

0
user12051965 17 mars 2021 à 01:40

1 réponse

Meilleure réponse

Le composant le plus haut renvoyé dans un rappel .map est celui qui a besoin du key. Ce:

{images.map((image, index) => (
  <div className="point">
    <div
        key={index}
        className={`${image === selectedImage && "current-point"}`}
      ></div>

Devrait être

{images.map((image, index) => (
  <div className="point" key={index}>
    <div
        className={`${image === selectedImage && "current-point"}`}
      ></div>

Puisque le tableau images semble être statique, l'utilisation de la clé pour l'index est sûre. Le déclarer en tant que tableau est également très bien. const images = ["image1","image2","image3"];

Aussi, pour ne pas interpoler false comme nom de classe (ce n'est pas intentionnel, non?), Utilisez plutôt l'opérateur conditionnel:

className={image === selectedImage ? "current-point" : ''}
5
CertainPerformance 16 mars 2021 à 22:44