Warning: Each child in an array or iterator should have a unique "key" prop. Check the render ...

最新推荐文章于 2023-02-23 20:11:01 发布

尼古拉斯-托尔斯泰-赵四

最新推荐文章于 2023-02-23 20:11:01 发布

阅读量2.2w

点赞数 4

分类专栏： React 文章标签： react-js

本文链接：https://blog.csdn.net/qq_31411389/article/details/52609708

版权

React 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

原组件：

//carousel.jsx
import React from 'react';


export default class CarouselList extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        var lists = this.props.lists;
        return (
            <div className="swiper-container">
                <div className="swiper-wrapper">
                    {
                        lists.map(function(data,i){
                            return (
                                <div className="swiper-slide" >
                                    <a href={data.url}>
                                        <img src={data.src} width="100%" height="100%" />
                                    </a>
                                </div>
                            )
                        })
                    }
                </div>
                <div className="swiper-pagination"></div>
            </div>
        )

    }
}

上面的组件执行会报错：Warning: Each child in an array or iterator should have a unique “key”
prop. Check the render method of CarouselList. See
https://fb.me/react-warning-keys for more information.

解决办法：循环的时候加个key={i} 虽然并没啥用，但是必须加

改后：

import React from 'react';


export default class CarouselList extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        var lists = this.props.lists;
        return (
            <div className="swiper-container">
                <div className="swiper-wrapper">
                    {
                        lists.map(function(data,i){
                            return (
                                <div className="swiper-slide" key={i}>
                                    <a href={data.url}>
                                        <img src={data.src} width="100%" height="100%" />
                                    </a>
                                </div>
                            )
                        })
                    }
                </div>
                <div className="swiper-pagination"></div>
            </div>
        )

    }
}