在 React JS 中，每个数组都需要一个唯一的键答案

【问题标题】：Each array need an unique key in React JS在 React JS 中，每个数组都需要一个唯一的键
【发布时间】：2016-10-09 16:34:09
【问题描述】：

我正在为 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>

如何映射这些设置以给它们一个键？

【问题讨论】：

标签： reactjs react-slick

【解决方案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>
   )
}

【讨论】：

我现在明白了 警告：flattenChildren(...)：遇到了两个使用相同密钥的孩子，cloned2。子键必须是唯一的；当两个孩子共享一个密钥时，只会使用第一个孩子。
我编辑了我的答案。试试我的“肮脏解决方案”并告诉我它是否有效以及输出是什么
我收到同样的警告。
你能控制台记录每个循环中的计数器/索引变量并检查哪个循环执行了两次吗？除了损坏的数组之外，我不知道为什么在我们的案例中不会唯一分配键值
计数器每次递增。很奇怪。

【解决方案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>
}

【讨论】：

我现在明白了 警告：flattenChildren(...)：遇到两个孩子使用相同的密钥，cloned2。子键必须是唯一的；当两个孩子共享一个密钥时，只会使用第一个孩子。