Question

我在React Native中有以下代码：

render() {
  var rows = [];
  for (var i = 0; i < 5; i++) {
    rows.push(
      <TouchableOpacity 
        key={i} 
        onPress={() => console.log(i)}>
        <Text>{i}</Text>
      </TouchableOpacity>
    );
  }
  return <View>{rows}</View>;
}

呈现以下内容：

但是，当我使用TouchableOpacity元素之一时，期望按3将3登录到控制台。而是将5记录到控制台。我该如何解决？

Answer 1

这是因为在i被调用时，console.log的值为5。

解决此问题的一种简单方法是不使用for循环，而只使用整数数组和map。

const rows = [0, 1, 2, 3, 4].map((i) => (
  <TouchableOpacity 
    key={i} 
    onPress={() => console.log(i)}>
    <Text>{i}</Text>
  </TouchableOpacity>
));

如果您确实想使用for循环，另一个简单的解决方法是将位重构为函数创建TouchableOpacity，因此它与{{1} }名称：

Answer 2

在JavaScript中将变量与var一起使用意味着它们是全局范围的，而不是像const和let这样的块范围。因此，在for循环结束时，i为5，每按一次将返回5。如果将循环更改为使用let i，它将解决此问题。

for (let i = 0; i < 5; i++) {
  rows.push(
    <TouchableOpacity 
      key={i} 
      onPress={() => console.log(i)}>
      <Text>{i}</Text>
    </TouchableOpacity>
  );
}

有关上述内容的进一步说明，请参见this post。

在JSX中为循环访问正确的ID

2 个答案: