Question

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

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

这并没有解决问题，但给了我更多的见解。

现在我的TouchableHighlight组件onPress事件接受变量，但它只使用循环赋值的最后一次迭代。

因此id变量总是在TouchableHighlight内的所有组件中分配给9。即使在onPress事件之外，id变量正在发生变化。

由于此问题，我的所有链接都不是动态的。如何在onPress组件上设置动态TouchableHighlight事件？

编辑：我使用native-base作为组件。

Answer 1

它与React Native无关，它与javascript范围和关闭有关。

var声明一个适用于function scope而非block scope的变量。

当onPress方法被称为async时，i变量是for loop之后的值。

将循环变量声明从var更改为let将解决此问题

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

您可能需要How do JavaScript closures work?作为参考。

React Native - 动态onPress事件

1 个答案: