React JS 中的每个数组都需要一个唯一的键

Question

我正在为 React JS 使用 React-Slick 滑块组件，但我收到一条警告，指出每个数组都必须有一个唯一的键。

我在滑块组件的设置中有一个数组。设置为：

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

我使用这些设置的滑块组件是：

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

我如何通过映射这些设置来为它们提供密钥？

Answer 1

我想这就是您可能需要的：

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

我想补充一点，map函数的第二个参数可以作为唯一索引，非常适合reacts请求的key属性

肮脏的解决方案：

...
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

为了使 diff 算法在比较 Virtual DOM 时正常工作，React 需要所有列表项都具有唯一键，以便它可以唯一地识别和区分每个组件。解决方案是将列表的索引作为键传递，如上面@noa-dev 所解释的：

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

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

React JS 中的每个数组都需要一个唯一的键

Each array need an unique key in React JS

reactjs

react-slick