今天试了一下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>
)
}
}
如果对你有帮助请给个❤️