ReactNative解决Warning: Each child

今天试了一下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>
        )
    }
}

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