Fehlende Schlüssel für das Element in React JS

Question

ich nächste Rückkehr haben:

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

Und der Artikel ist so etwas wie:

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

Aber ich halten bin immer für Element "Schlüssel" prop fehlt im Iterator.

Wenn ich den Schlüssel in den div legen

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

ich ein paar Warnungen:

Warnung: flattenChildren (...): Fand zwei Kinder mit dem gleichen Schlüssel, cloned1 . Untergeordnete Schlüssel müssen eindeutig sein; Wenn zwei Kinder einen Schlüssel teilen, wird nur das erste Kind verwendet.

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; 

Daten

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

Der Code, wo ich allCars.map verwenden:

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; 

Answer 1

Diese Meldung:

Warnung: flattenChildren (...): Zwei Kinder mit dem gleichen Schlüssel , cloned1. Untergeordnete Schlüssel müssen eindeutig sein; Wenn zwei Kinder einen Schlüssel teilen, wird nur das erste Kind verwendet.

Normalerweise bedeutet, dass 2 Ihrer item.id Werte gleich sind. Ich würde Ihre Eingabedaten überprüfen und sehen, ob alle Werte item.id eindeutig sind.

Wie der Fehler angibt, werden Sie wahrscheinlich feststellen, dass nur das erste Kind gerendert wird.