ReactNative解决Warning: Each child in an array or iterator should have a unique "key" prop.

今天试了一下RN项目, 报了个奇葩错误, 先上代码

//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.

解决办法:循环的时候加个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>
        )
    }
}

如果对你有帮助请给个❤️

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容