Javascript 反应本机-动态onPress事件_Javascript_Reactjs_React Native

Javascript 反应本机-动态onPress事件

javascript reactjs react-native

Javascript 反应本机-动态onPress事件,javascript,reactjs,react-native,Javascript,Reactjs,React Native,我不熟悉react native，我遇到了一些不确定如何解决的问题我有基于一些API数据动态渲染的组件 for (var i = 0; i < data.length; i++) { categoryComponents.push( <Card key={data[i].id}> <CardItem> <Body> <T

我不熟悉

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>
    );
}

如您所见，我只是将要使用的值存储到局部变量中，并引用这些变量，而不是

数据
这并没有解决问题，但给了我更多的洞察力
现在，我的TouchableHighlight
componentsonPress
事件接受变量，但它只使用循环赋值的最后一次迭代
因此，我的id
变量始终在TouchableHighlight
内的所有组件中分配给9。即使在外部onPress
事件中，id
变量也在变化
由于这个问题，我的链接没有一个是动态的。如何在TouchableHighlight
组件上设置动态onPress
事件
编辑：我对组件使用native base
。
这与React native无关，而是关于javascript范围和闭包
var
声明一个在功能范围
工作的变量，而不是块范围

由于onPress方法可以称为async，i
变量是循环之后的值
将循环变量声明从var
更改为let
将解决此问题
// let declare a variable works at `block scope`
for (let i = 0; i < data.length; i++){}

//让声明变量在`块范围内工作`
对于（设i=0；i

您可能需要作为参考。
为什么不使用FlatList，省去所有麻烦？
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>
    );
}

// let declare a variable works at `block scope`
for (let i = 0; i < data.length; i++){}