Chaque tableau a besoin d'une clé unique dans React JS

Question

J'utilise le composant React-Slick slider pour React JS, mais je reçois un avertissement comme quoi chaque tableau doit avoir une clé unique.

J'ai un tableau à l'intérieur des paramètres pour le composant slider. Les paramètres sont :

const settings = {
        dots: false,
        arrows: false,
        autoplay: true,
        autoplaySpeed: 4000,
        responsive: [
            {breakpoint: 310, settings: {slidesToShow: 1, slidesToScroll: 1, autoplay: true, autoplaySpeed: 4000}},
            {breakpoint: 468, settings: {slidesToShow: 1, slidesToScroll: 1, autoplay: true, autoplaySpeed: 4000}},
            {breakpoint: 750, settings: {slidesToShow: 2, slidesToScroll: 1, autoplay: true, autoplaySpeed: 4000}},
            {breakpoint: 800, settings: {slidesToShow: 2, slidesToScroll: 1, autoplay: true, autoplaySpeed: 4000}},
            {breakpoint: 1200, settings: {slidesToShow: 3, slidesToScroll: 2, autoplay: true, autoplaySpeed: 4000}},
            {breakpoint: 1800, settings: {slidesToShow: 4, slidesToScroll: 2, autoplay: true, autoplaySpeed: 4000}},
            {breakpoint: 2600, settings: {slidesToShow: 5, slidesToScroll: 2, autoplay: true, autoplaySpeed: 4000}},
            {breakpoint: 100000, settings: 'unslick'}
        ]
    };

Et le composant du curseur où j'utilise ces paramètres est :

<Slider {...settings}>
      {this.cars()}
</Slider>

Comment puis-je passer par ces paramètres pour leur donner une clé ?

Answer 1

Je pense que c'est ce dont vous pourriez avoir besoin :

...
render(){
   var Cars = settings.responsive.map.function(car, index){
      return(<div key={index}>YOUR CONTENT</div>);
   }
   return(
    <Slider {...settings}>
        {Cars}
    </Slider>
   )
}

Je veux ajouter que le second paramètre de la fonction map peut être utilisé comme un index unique qui convient parfaitement à l'attribut clé demandé par les réacteurs.

Solution sale :

...
render(){
   var counter = 0;
   var Cars = settings.responsive.map.function(car, index){
      counter++;
      return(<div key={counter}>YOUR CONTENT</div>);
   }
   return(
    <Slider {...settings}>
        {Cars}
    </Slider>
   )
}

Answer 2

Pour que l'algorithme diff fonctionne correctement lors de la comparaison du DOM virtuel, react a besoin que tous les éléments de la liste aient des clés uniques afin qu'il puisse identifier et différencier chaque composant de manière unique. La solution à cela est de passer l'index de la liste comme clé comme expliqué par @noa-dev ci-dessus :

render(){
  var Cars = this.cars().map(car, index){
    return(<div key={index}>{car}</div>);
  }

  <Slider {...settings}>
     {Cars}
  </Slider>
}