React Native 实战系列三

RN item 点击 index

no图nobb

先上图：

案发现场：

1.json数据：

[
    {"iconName":"order1","title":"待付款"},
    {"iconName":"order2","title":"待评价"},
    {"iconName":"order3","title":"待使用"},
    {"iconName":"order4","title":"退款/售后"},
]

2. 错误的js代码

 renderDataView() {
    var itemArr = [];
    for (var i = 0; i < dataJson.length; i++) {
      //json的length为4

      var data = dataJson[i];

      itemArr.push(
        <TouchableOpacity key={i} onPress={() => this.onOrderPress(i)}>
          <InnerView iconName={data.iconName} title={data.title} />
        </TouchableOpacity>
      );
    }
    return itemArr;
  };
  
  onOrderPress(i) {
    alert(i);
  }

这里，json的长度为4，出现的问题就是，渲染component以后，每次点击对应的view，alert出来的居然都是4，而不是对应传入的index，按说，即使不便，也应该是最大的3 啊，不会是4啊，这就非常令我费解了，后来求助了大神@波仔糕，解决了问题

3.正确的js代码

 renderDataView() {
    var itemArr = [];
    for (var i = 0; i < dataJson.length; i++) {
      //json的length为4
      
      var data = dataJson[i];
      let temp=i;
      itemArr.push(
        <TouchableOpacity key={i} onPress={() => this.onOrderPress(temp)}>
          <InnerView iconName={data.iconName} title={data.title} />
        </TouchableOpacity>
      );
    }
    return itemArr;
  };
  onOrderPress(i) {
    alert(i);
  }

这里需要注意的是，EcmaScript 6的语法中，let和var的作用是不同的，这里let相当于局部变量，而var相当于全局变量...(不过我还不懂。。。先记下来吧)
更多EcmaScript 6语法，参照阮一峰老师的 ECMAScript 6 入门