React JS 中缺少元素的键答案

【问题标题】：Missing key for element in React JSReact JS 中缺少元素的键
【发布时间】：2016-10-06 23:00:11
【问题描述】：

我有下一个回报：

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

但我不断收到 Missing "key" prop for element in iterator。

当我把钥匙放在 div 中时

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

我收到一些警告：

警告：flattenChildren(...)：遇到两个具有相同密钥的孩子，cloned1。子键必须是唯一的；当两个孩子共享一个密钥时，只会使用第一个孩子。

更新

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

我使用 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;

【问题讨论】：

Idk 到底是什么问题，也许 React 使用数字作为一些内部 id，但如果你将 '1' 更改为 'id-1' 之类的东西就可以了。
我试过了，但问题是一样的。

标签： reactjs

【解决方案1】：

这条消息：

警告：flattenChildren(...): 遇到两个相同的孩子键，克隆 1。子键必须是唯一的；当两个孩子共用一个键，只会使用第一个孩子。

通常意味着您的item.id 值中有两个相同。我会检查您的输入数据，看看是否所有 item.id 值都是唯一的。

正如错误所述，您可能会注意到只有第一个孩子被渲染。

【讨论】：

我已经添加了数据。