从动态生成的列表中动态选择元素

Question

I am trying to select an element from a dynamically generated list of elements at the event of a touch. I am generating the list with a for loop. In each element I add an event listener and push the navigation stack to another screen. This works perfectly fine. At the same time however, I try to update the state to the selected element. Because I only want to update the state once the user presses the view/button, I am calling the function inside the event listener. The issue is, that the state is always updated to the last index of the for loop and I am not able to access the index of each element. Can anybody help me with this?

const ListRecommendations = [];
for (var i = 0; i < this.Data.length; i++) {
  ListRecommendations.push(
    <View key={i}
      style={styles.Recommendation}

      onStartShouldSetResponder={() => {
        Navigation.push(this.props.componentId, {
          component: {
            name: 'secondScreen',
          }
        });
        this.setState(i);
      }}
      
    >
      <ImageBackground 
        source= {{uri: this.Data[i].FilePath}}
        style={styles.backgroundImage}
      >
        <Text style={styles.Title}>{this.Data[i].Title}</Text>
      </ImageBackground>
    </View>
  )
}

Answer 1

you use a var in you loop but you should know that var declaration doesn't work on for block scope, and i will be equal the last value

to fix it use let

for(let  I=0; I < 10; I++){
  // ...
}

Please read more https://javascript.info/variables