ReactネイティブリストonPress "i"を使用して間違ったオブジェクトを送信する

Question

私は反応ネイティブでリストを作成しており、各要素はクリック可能です。要素がクリックされると、別のシーンにナビゲートし、クリックされた要素と 'i'の値に基づいてオブジェクトを渡します。

要素をクリックすると、「終了」したオブジェクトが常に送信されます。どちらが理にかなっている。

constructor(props) { 
    super(props); 

    this.state = { 
    items: this.props.items 
    }; 
    } 

makeList() { 
    var items = [] 
    for (var i = 0; i <3; i++) { 
     items.push(
     <TouchableOpacity 
     activeOpacity={0.6} 
     onPress={() => this.sendItem(this.state.items[i])}> 
      <View>this.state.items[i].name</View> 
     </TouchableOpacity> 
    ) 
    } 
    return items; 
} 

render() { 
    return (
    <View> 
     {this.makeList()} 
    </View> 
); 
} 

sendItem(item) { 
    this.props.navigate(item); 
} 

アイテムのいずれかがクリックされるたびに常に「4」が送信されます。

これを修正して正しいオブジェクトを送信するにはどうすればよいですか？

ありがとうございました！

Answer 1

varループの反復ごとに新しい変数を作成しないため、同じi変数を変更しています。ループが終了すると、i === 3となるので、onPressコールバックに表示されます。代わりにletを使用できます。

for (let i = 0; i <3; i++) { 

また、ループを回避することもできます。

const items = Array.from({length: 3}, (x, i) => { 
    return <TouchableOpacity ... />; 
});