Question

我接下来要回来了：

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＆＃34; key＆＃34;迭代器中元素的道具。

当我将密钥放入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;

Answer 1

此消息：

警告：flattenChildren（...）：遇到两个孩子一样 key，cloned1。子键必须是唯一的;当两个孩子分享一个键，只会使用第一个孩子。

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

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

在React JS中缺少元素的键

1 个答案: