Rendering динамического ListView и передавая ключ к методу

Question

Я пытаюсь сделать ListView с динамическим количеством переключателей так в моей функции _renderRow я сделал следующее: (список содержит ключ, массив значений)

_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, всегда является последним из моего списка, хотя, когда я подталкивал его в свой массив, это не так.

Answer 1

В JavaScript переменные, объявленные с помощью var получает hoisted, поэтому, когда _changeValue(k) работает, k всегда будет последнее значение, она была назначена на. Вы можете решить эту проблему с помощью closure:

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

Или, если вы используете ES6, вы можете использовать let, чтобы создать блок области видимости переменной:

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

Answer 2

Альтернативный подход мог бы использовать метод 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> 
    ) 
}