React Native for loop TouchableOpacity scope JSX

Question

const result = [];
for (i = 0; i < 2 && i < ar.length; i++) {
result.push(  
<>
<Countdown dateObj = {ar[i].time} />
<TouchableOpacity onPress={()=>{
console.log("SENDING DATA", ar[i]);
navigation.navigate("ChatInterface", {data: ar[i]});
}}>
</TouchableOpacity>
</>
);
}
...
return <>{result}</>;

我把所有东西都放在for循环中，这样以后就可以使用`return<gt；{result}<>。然而，

ar[i]显示为未定义。尽管上面涉及Countdown的行工作良好。我认为这与TouchableOpacity中匿名函数的范围有关。我怎样才能让它发挥作用？

Answer 1

我发现了问题所在。

问题是TouchableOpacity代码不会在"i"递增的同时执行。它被执行得比for循环的结束晚得多；i〃；变量保持不变。

因此，当它到达TouchableOpacity代码时，for循环已经中断，"i"超出了范围。因此，当我尝试访问它时，索引i处的项是未定义的。

我想，这对我来说是正确的，因为我试图在for循环中表现得很聪明。

我通过再次引用我的数据来修复它。我没有直接引用ar[i]，而是首先复制了const dat = ar[i]，并在TouchableOpacity中引用了dat。