我是 react-native 的新手，我遇到了一些我不确定如何解决的问题。
我有一些组件可以根据一些 API 数据动态呈现。
for (var i = 0; i < data.length; i++)
{
categoryComponents.push(
<Card key={data[i].id}>
<CardItem>
<Body>
<TouchableHighlight onPress={(event) => {
const { navigate } = this.props.navigation;
navigate('Category', { category: data[i].id });
}}>
<Text>{data[i].name + " " + data[i].id}</Text>
</TouchableHighlight>
</Body>
</CardItem>
</Card>
);
}
如您所见，我将动态组件存储在一个数组中。我将其渲染到屏幕上:
render() {
return (
<Container>
<Content style={styles.spacer}>{categoryComponents}</Content>
</Container>
)
}
问题是在我的 TouchableHighlight 组件中，onPress 事件似乎不接受 data[i].id 变量.它会抛出一个错误，提示 undefined。但是，我在 onPress 事件之外使用它并且它已被定义。
我试图解决这个问题，所以我更改了我的代码:
for (var i = 0; i < data.length; i++)
{
var name = data[i].name;
var id = data[i].id;
categoryComponents.push(
<Card key={id}>
<CardItem>
<Body>
<TouchableHighlight onPress={(event) => {
const { navigate } = this.props.navigation;
navigate('Category', { category: id });
}}>
<Text>{name + " " + id}</Text>
</TouchableHighlight>
</Body>
</CardItem>
</Card>
);
}
如您所见，我只是将要使用的值存储到局部变量中并引用这些变量而不是数据。
这并没有解决问题，但让我有了更多的见解。
现在我的 TouchableHighlight 组件 onPress 事件接受变量，但它只使用循环赋值的最后一次迭代。
因此，在 TouchableHighlight 内的所有组件中，我的 id 变量总是分配给 9。即使在 onPress 事件之外，id 变量也在改变。
由于这个问题，我的链接都不是动态的。如何在 TouchableHighlight 组件上设置动态 onPress 事件？
编辑:我对组件使用 native-base。
最佳答案
这与 React Native 无关，它与 javascript 作用域和闭包有关。
var 声明一个工作在函数作用域，而不是 block 作用域的变量。
由于onPress 方法被异步调用，i 变量是for 循环 之后的值。
将循环变量声明从 var 更改为 let 将解决此问题
// let declare a variable works at `block scope`
for (let i = 0; i < data.length; i++){}
您可能需要 How do JavaScript closures work?作为引用。
关于javascript - React Native - 动态 onPress 事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46565771/