React Native-動態onPress事件

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變量也在更改。

由於這個問題，我的所有鏈接都不是動態的。 如何在TouchableHighlight組件上具有動態的onPress事件？

編輯：我使用native-base的組件。

Answer 1

它與React Native無關，與javascript范圍和閉包有關。

var聲明一個在function scope而不是block scope起作用的變量。

由於onPress方法稱為異步方法，因此i變量是for loop之后的值。

將循環變量聲明從var更改為let將解決此問題

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

您可能想要JavaScript閉包如何工作？ 作為參考。

React Native-動態onPress事件

問題描述

1 個解決方案

解決方案1
1 已采納 2017-10-04 13:36:18

React Native-動態onPress事件

問題描述

1 個解決方案

解決方案1 1 已采納 2017-10-04 13:36:18

解決方案1
1 已采納 2017-10-04 13:36:18