Блог

У меня есть эта функция, которая должна перебирать 20 элементов массива (smn), чтобы показать элементы, удовлетворяющие условию 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);
        });
  

Похоже, вы досрочно выходите из цикла, возвращая JSX при первом smn , который соответствует условию. Вместо этого вы можете захотеть вернуть массив JSXES, некоторые из которых являются ложными. Вы можете сделать это, map заменив smn s на JSX. Обратите внимание, что при работе с массивами JSX рекомендуется явно передавать key prop корневому элементу каждого элемента массива.

 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 неявно, что является ложным.

На первой итерации вы возвращаетесь из renderSMN без продолжения цикла.

Я бы посоветовал сделать что-то вроде.

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

    return null;
});
  

вместо цикла for. Что позволяет по-прежнему использовать ключевое слово return

Вы бы хотели заменить экземпляры smn [i] на smnItem