javascript - Array.map 未在 React Native 中呈现

Question

我的代码有一些问题，我不知道哪里出了问题，

这是我的代码:

import React, { Component } from 'react';
import {ActivityIndicator,Alert,View, Text,ScrollView,Image,AsyncStorage, ImageBackground,TouchableOpacity } from 'react-native';
import {  Button } from 'native-base';
import styles from './styles/style';

export default class MisCompromisos extends Component {


  constructor(props){

        super(props);
        this.state = {
            usuario : "",
            id_usuario: "",
            isLoading: true,
            dataSource : []
        }
        this.CargarApp();

    }

    CargarApp = async() => {

        const userToken = await AsyncStorage.getItem('usuario');

        let datos_usuario = JSON.parse(userToken);  

        this.setState({ usuario     : datos_usuario, 
                        id_usuario  : datos_usuario.user_id 
                    });

        this.misArticulos();

    }


    misArticulos(){

        this.setState({
            isLoading: true
        });

        return fetch('http://endpoint.com', {
            method: 'POST',
            header :{
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                id_usuario      : this.state.id_usuario,

            })
        })
        .then((response) => response.json())
        .then((responseJson) => {
            this.setState({
              isLoading: false,
              dataSource: responseJson,
            }, function(){

            });
        })
        .catch((error) => {
            Alert.alert('error: '+error);
            console.error(error);
        });

    }

    misCompromisosG20(){
        const MisDatos = this.state.dataSource;
        let i = 1;
        let clase = "";
        if(this.state.dataSource && this.state.dataSource.length){

            return (this.state.dataSource.map((value) => {
                     <View key={value.id_comentario.toString()} value={value.id_comentario} style={styles.ContenedorTarjetas}>
                        <View style={styles.CardCompromisosFirst}>
                            <View style={styles.CompromisosBorder}><Text style={styles.CompromisosBlancos}>Compromiso: </Text></View>
                            <View><Text style={styles.CompromisosBlancos}>{value.compromisos_personales}</Text></View>
                        </View>      
                  </View>;
            })
            );
        }
        else{
            return  <View  style={styles.ContenedorTarjetas}>
                        <View style={styles.CardCompromisosFirst}>
                            <View style={styles.CompromisosBorder}><Text style={styles.CompromisosBlancos}>Lo sentimos: </Text></View>
                            <View><Text style={styles.CompromisosBlancos}>Aún no guardas ningún compromiso</Text></View>
                        </View>
                    </View>

        }
    }

  render() {

    const userToken = this.state.usuario;
    const MisDatos = this.state.dataSource;
    let i = 1;
    let clase = "";

    if(this.state.isLoading){
        return(
          <View style={styles.MainContainer}>
            <ActivityIndicator/>
          </View>
        )
    }

    else{
        return (
            <ScrollView>
                <ImageBackground 
                    source={require('../assets/img/woods-g20.jpg')}
                    imageStyle={{resizeMode: 'cover'}}
                    style={{
                        width: '100%', flex: 1, alignItems: 'center', justifyContent: 'center'
                    }}
                >
                    <View style={styles.ContenedorMain}>
                        <View style={styles.ContenedorCompromisos}>
                            <Image
                            style={{width: 236, height: 85}}
                            source={require('./../assets/img/logo.png')}
                            />
                            <Text style={styles.TituloCompromisos}>My commitments </Text>
                            <Text style={styles.ParrafosBlancos}>{userToken.name}</Text>
                            <TouchableOpacity onPress={() => this.props.navigation.navigate('Bienvenido')} style={styles.Casita}>
                                <Image
                                    style={{width: 40, height: 37}}
                                    source={require('./../assets/img/white-house.png')}
                                />
                            </TouchableOpacity>
                            <View style={styles.CardReload}>
                                <Button block primary style={{ marginTop: 10, marginBottom: 20, width: '100%' }} onPress={this.misArticulos.bind(this)} >
                                    <Text style={styles.Blanco}>Cargar más información</Text>
                                </Button>                            
                            </View>
                        </View>
                    </View>

                </ImageBackground>
                <View style={styles.ContenedorMain}>
                    {
                        this.misCompromisosG20()
                    }

                </View>
            </ScrollView>
        );
    }


  }
}

当我在没有验证的情况下放置 array.map 时工作但当我尝试 if 和 else 它不工作时，我在 map 之前添加了 return，但它不起作用，所以我的代码有什么问题，有人可以帮我解决这个问题吗，我也是 React Native 的新手，

谢谢!

Answer 1

你错过了 map 函数中的 return

misCompromisosG20(){
    const MisDatos = this.state.dataSource;
    let i = 1;
    let clase = "";
    if(this.state.dataSource && this.state.dataSource.length){

        return (this.state.dataSource.map((value) => {
                 return (<View key={value.id_comentario.toString()} value={value.id_comentario} style={styles.ContenedorTarjetas}>
                    <View style={styles.CardCompromisosFirst}>
                        <View style={styles.CompromisosBorder}><Text style={styles.CompromisosBlancos}>Compromiso: </Text></View>
                        <View><Text style={styles.CompromisosBlancos}>{value.compromisos_personales}</Text></View>
                    </View>      
              </View>);
        })
        );
    }
    else{
        return  <View  style={styles.ContenedorTarjetas}>
                    <View style={styles.CardCompromisosFirst}>
                        <View style={styles.CompromisosBorder}><Text style={styles.CompromisosBlancos}>Lo sentimos: </Text></View>
                        <View><Text style={styles.CompromisosBlancos}>Aún no guardas ningún compromiso</Text></View>
                    </View>
                </View>

    }
}