在元素缺少關鍵陣營JS

我有未來的回報：在元素缺少關鍵陣營JS

return allCars.map(function (item) { 
     return (
      <div className="featured-item col-xs-12"> 
       <Car key={item.id} car={item}/> 
      </div>); 
    });

而且該項目是一樣的東西：

id: 1, 
url: "../../images/car-list/car-list-1.jpg", 
price: 6000, 
make: 'Mercedes', 
model: 'AMG 6.3', 
mileage: 12000

但我不斷收到缺少‘關鍵’的prop元素在迭代器中。

當我把在div關鍵

<div className="featured-item col-xs-12" key={item.id}><Car car={item}/></div>

，我收到了一些警告：

警告：flattenChildren（...）：遇到兩個孩子使用相同的密鑰，cloned1 。子鑰匙必須是唯一的;當兩個孩子分享一把鑰匙時，只有第一個孩子會被使用。

UPDATE

class CarsList extends React.Component { 

    cars() { 
     const allCars = this.props.allCars; 

     return allCars.map(function (item, i) { 
      return (<div className="featured-item col-xs-12" key={'id' + i}><Car car={item}/></div>); 
     }); 
    } 

    render() { 

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

     return (
      <div className="container-fluid"> 
       <div className="row"> 
        <div className="col-md-12" style={{paddingTop: '30px !important'}}> 
         <div className="heading-section-2 text-center"> 
          <h2 className="carListTitle">{this.props.currentLanguage.carListTitle}</h2> 
          <div className="dec"><FontAwesome name="car" className="faIcon"/></div> 
          <div className="line-dec"></div> 
         </div> 
        </div> 
       </div> 
       <div className="row"> 
        <div id="featured-cars"> 
         <div className="col-lg-12"> 
          <Slider {...settings}> 
           {this.cars()} 
          </Slider> 
         </div> 
        </div> 
       </div> 
      </div> 
     ); 
    } 
} 

export default CarsList;

數據

function carsList() { 
    //Go to server get car homepage details 
    return [{ 
     id: 1, 
     url: "../../images/car-list/car-list-1.jpg", 
     price: 6000, 
     make: 'Mercedes', 
     model: 'AMG 6.3', 
     mileage: 12000, 
     description: [<div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc">Armrest front</div>, 
      <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc carDescTextRight">Automatic 
       climate</div>, 
      <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc">Leather upholstery</div>, 
      <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc carDescTextRight">Light alloy 
       wheels</div>, 
      <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc">Xenon-light</div>, 
      <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc carDescTextRight">Cruise control</div>] 
    }, { 
     id: 2, 
     url: "../../images/car-list/car-list-2.jpg", 
     price: 6000, 
     make: 'Mercedes', 
     model: 'AMG 6.3', 
     description: [<div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc">Armrest front</div>, 
      <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc carDescTextRight">Automatic 
       climate</div>, 
      <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc">Leather upholstery</div>, 
      <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc carDescTextRight">Light alloy 
       wheels</div>, 
      <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc">Xenon-light</div>, 
      <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc carDescTextRight">Cruise control</div>] 
    }, { 
     id: 3, 
     url: "../../images/car-list/car-list-3.jpg", 
     price: 6000, 
     make: 'Mercedes', 
     model: 'AMG 6.3', 
     description: [<div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc">Armrest front</div>, 
      <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc carDescTextRight">Automatic 
       climate</div>, 
      <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc">Leather upholstery</div>, 
      <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc carDescTextRight">Light alloy 
       wheels</div>, 
      <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc">Xenon-light</div>, 
      <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc carDescTextRight">Cruise control</div>] 
    }, 
     { 
      id: 4, 
      url: "../../images/car-list/car-list-3.jpg", 
      price: 6000, 
      make: 'Mercedes', 
      model: 'AMG 6.3', 
      description: [<div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc">Armrest front</div>, 
       <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc carDescTextRight">Automatic 
        climate</div>, 
       <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc">Leather upholstery</div>, 
       <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc carDescTextRight">Light alloy 
        wheels</div>, 
       <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc">Xenon-light</div>, 
       <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc carDescTextRight">Cruise control</div>] 
     }, 
     { 
      id: 5, 
      url: "../../images/car-list/car-list-3.jpg", 
      price: 6000, 
      make: 'Mercedes', 
      model: 'AMG 6.3', 
      description: [<div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc">Armrest front</div>, 
       <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc carDescTextRight">Automatic 
        climate</div>, 
       <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc">Leather upholstery</div>, 
       <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc carDescTextRight">Light alloy 
        wheels</div>, 
       <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc">Xenon-light</div>, 
       <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc carDescTextRight">Cruise control</div>] 
     }, 
     { 
      id: 6, 
      url: "../../images/car-list/car-list-3.jpg", 
      price: 6000, 
      make: 'Mercedes', 
      model: 'AMG 6.3', 
      description: [<div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc">Armrest front</div>, 
       <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc carDescTextRight">Automatic 
        climate</div>, 
       <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc">Leather upholstery</div>, 
       <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc carDescTextRight">Light alloy 
        wheels</div>, 
       <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc">Xenon-light</div>, 
       <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc carDescTextRight">Cruise control</div>] 
     }, 
     { 
      id: 7, 
      url: "../../images/car-list/car-list-3.jpg", 
      price: 6000, 
      make: 'Mercedes', 
      model: 'AMG 6.3', 
      description: [<div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc">Armrest front</div>, 
       <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc carDescTextRight">Automatic 
        climate</div>, 
       <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc">Leather upholstery</div>, 
       <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc carDescTextRight">Light alloy 
        wheels</div>, 
       <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc">Xenon-light</div>, 
       <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 noPadding carDesc carDescTextRight">Cruise control</div>] 
     }]; 
}

其中I使用allCars.map的代碼：

import React from 'react'; 
import FontAwesome from 'react-fontawesome'; 

const Car = ({car}) => { 
    return (
    <div> 
     <img src={car.url} alt="" /> 
     <div className="down-content"> 
     <a href="" className="carName"><h2>{car.make} {car.model}</h2></a> 
     <span className="price">{car.mileage}</span> 
     <div className="light-line"></div> 
     <div className="carDescBox" style={{margin: "10px 0 30px 0", display: 'block'}}>{car.description}</div> 
     <div className="clearfix"></div> 
     <div className="car-info"> 
      <ul> 
      <li><FontAwesome name="flask" className="faIcon" />{car.fuel}</li> 
      <li><FontAwesome name="car" className="faIcon" />{car.type}</li> 
      <li><FontAwesome name="road" className="faIcon" />{car.mileage}</li> 
      </ul> 
     </div> 
     </div> 
    </div> 
); 
}; 

export default Car;

來源

2016-06-07 Boky

Idk究竟是什麼問題，也許React使用數字作爲一些內部ID，但是如果你把'1'改成'id-1'這樣的東西就沒問題。 –

我試過了，但問題是一樣的。 – Boky

此消息：

警告：flattenChildren（...）：遇到兩個與密鑰相同的子女，cloned1。子鑰匙必須是唯一的;當兩個孩子共用一把鑰匙時，只有第一個孩子會被使用。

通常表示您的item.id值中有2個是相同的。我會檢查你的輸入數據，看看是否所有的item.id值都是唯一的。

由於錯誤狀態，您可能會注意到只有第一個孩子被渲染。

來源

2016-06-07 07:14:48

我已添加數據。 – Boky

在元素缺少關鍵陣營JS

回答

相關問題