渲染动态ListView并将键传递给方法

时间:2016-10-07 10:21:23

标签: javascript listview reactjs react-native

我尝试使用动态数量的开关渲染ListView,因此在我的_renderRow函数中,我执行了以下操作:( list包含一个键,值数组)

_renderRow(list) {
    var jsxList = [];

    for (var k in list) {
      jsxList.push(
        <View>
          <Text>{list[k]}</Text>
          <Switch value={this.state.switches[k]} onValueChange={() => this._changeValue(k)}/>
        </View>
      )
    }

    return (
      <View>
        {jsxList}
      </View>
    )
}

我的问题是,当我触发开关时,发送到_changeValue的键始终是我列表中的最后一个,即使我把它推到我的阵列时也不是。

2 个答案:

答案 0 :(得分:1)

在JavaScript中,使用df.set_index('D', append=True) \ .rename_axis(['col'], 1) \ .rename_axis([None, 'val2']) \ .stack().to_frame('val') \ .reset_index(['col', 'val2']) \ [['col', 'val', 'val2']] 声明的变量获得hoisted,因此当var运行时,_changeValue(k)将始终是分配给它的最后一个值。您可以使用closure

解决此问题
k

或者,如果您使用ES6,则可以使用for (var k in list) { (function () { jsxList.push( <View> <Text>{list[k]}</Text> <Switch value={this.state.switches[k]} onValueChange={() => this._changeValue(k)}/> </View> ) }()) } 创建块范围变量:

let

答案 1 :(得分:0)

另一种方法可能是使用map方法而不是for..in循环:

_renderRow(list) {
    var jsxList = list.map((item, k) => {
      return (  
        <View>
          <Text>{item}</Text>
          <Switch value={this.state.switches[k]} onValueChange={() => this._changeValue(k)}/>
        </View>
      );
    }

    return (
      <View>
        {jsxList}
      </View>
    )
}