React Native，For循环只显示第一个数组元素答案

【问题标题】：React Native, For Loop shows only the first Array ElementReact Native，For循环只显示第一个数组元素
【发布时间】：2020-08-15 19:23:22
【问题描述】：

我有这个函数，它应该循环遍历（smn）数组的 20 个元素以显示满足 IF 条件的元素，使用这段代码我只得到了第一个数组元素：

    renderSMN() {
    const smn = ['fb', 'twt', 'snp', 'ins', 'ytu', 'lnk', 'tik', 'beh', 'pin', 'tmp', 'www', 'eml', 'wap', 'msg', 'tlg', 'lin', 'wch', 'skp', 'snd', 'oth'];
    for (let i = 0; i < 20; i++) {
        //alert(this.state.data.smu_+smn[i]);
        alert(i);
        if (this.state.data.smu_+smn[i] != "") {
            return (
                <View style={{ margin: 5 }}>
                    <TouchableOpacity onPress={() => {
                        this.props.navigation.navigate('Result', { postId: item.uid, otherParam: 'Pass whatever you want here', });
                    }}>
                        <Image source={{ uri: 'http://localhost/rest/smn/' + smn[i] + '.png' }} style={{ width: 100, height: 100, right: 0, }} />
                    </TouchableOpacity>
                <Text>{i}</Text>
                </View>
            );
        }

这是我从 JSON 文件中获取数据的方式：

        fetch('http://localhost/rest/api/single_read.php/?id=' + postId, {
        method: 'GET'
    })
        .then((response) => response.json())
        .then((responseJson) => {
            console.log(responseJson);
            this.setState({
                data: responseJson
            })
        })
        .catch((error) => {
            console.error(error);
        });

【问题讨论】：

标签： javascript reactjs react-native for-loop

【解决方案1】：

看起来您通过在第一个匹配条件的smn 上返回 JSX 来提前退出循环。您可能想要做的是返回一个 JSX 数组，其中一些是虚假的。你可以通过map将smns 发送到 JSX 来做到这一点。请注意，在使用 JSX 数组时，建议将 key 属性显式传递给每个数组元素的根元素。

renderSMN() {
    const smn = ['fb', 'twt', 'snp', 'ins', 'ytu', 'lnk', 'tik', 'beh', 'pin', 'tmp', 'www', 'eml', 'wap', 'msg', 'tlg', 'lin', 'wch', 'skp', 'snd', 'oth'];
    return smn.map((s, i) => {
        alert(i);
        if (this.state.data.smu_+s != "") {
            return (
                <View style={{ margin: 5 }} key={i}>
                    <TouchableOpacity
                        onPress={() => {
                        this.props.navigation.navigate('Result', { postId: item.uid, otherParam: 'Pass whatever you want here', });
                        }}
                    >
                        <Image source={{ uri: 'http://localhost/rest/smn/' + s + '.png' }} style={{ width: 100, height: 100, right: 0, }} />
                    </TouchableOpacity>
                    <Text>{i}</Text>
                </View>
            );
        }
    });
}

注意，如果条件不成立，函数会隐式返回undefined，这是假的。

【讨论】：

我使用 this.state.data.smu_nam 在渲染中显示 JSON 项（名称），但它在我创建的函数中不起作用。
我不明白你的问题@HowardJohn
我已经使用 this.state.data.smu_nam 显示来自 JSON 的数据，它在内工作正常，但在其他地方不行。

【解决方案2】：

在第一次迭代中，您从 renderSMN 返回而不继续循环。

我建议做类似的事情。

return smn.map(smnItem => {
    if(this.state.data.smu_+smnItem !== '') {
        return (...)
    } 

    return null;
});

而不是 for 循环。这允许仍然使用 return 关键字

您想用 smnItem 替换 smn[i] 的实例

【讨论】：