React-Native中Array的key警告

我们在项目里面,经常会用的批次渲染,比如一个列表渲染很多个item,或者一个横排或者竖排同时渲染多个数据等这种情况,一个个写显然是最笨的做法,当数据多时根本无法做到,此时很多人都会想到以下做法:

render(){
    var eleArray = [];
    for(var i=0;i<ZWViewExample.examples.length;i++){
      var ele=(
        <View style={{marginBottom: 10, backgroundColor: 'white', padding: 10}}>
          <Text style={{marginBottom: 10}}>{ZWViewExample.examples[i].title}</Text>
          {ZWViewExamdple.examples[i].render()}
        </View>
      )
       eleArray.push(ele);
    }
    return(
      <ScrollView style={{flex:1}}>
        {eleArray}
      </ScrollView>
    );
  }

这样写确实是一个非常不错的做法,但是这样写,React-Native会报一个警告,需要你对每个item添加一个key。

解决方法就是为View加上一个key,这个key可以成为每一个View的唯一标识,根据这个标识就可以找到指定的View进行操作。

改进后的写法为:

render(){
    var eleArray = [];
    for(var i=0;i<ZWViewExample.examples.length;i++){
      var ele=(
        <View style={{marginBottom: 10, backgroundColor: 'white', padding: 10}} key={i}>
          <Text style={{marginBottom: 10}}>{ZWViewExample.examples[i].title}</Text>
          {ZWViewExamdple.examples[i].render()}
        </View>
      )
       eleArray.push(ele);
    }
    return(
      <ScrollView style={{flex:1}}>
        {eleArray}
      </ScrollView>
    );
  }
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值