我的代码有一些问题,我不知道哪里出了问题,
这是我的代码:
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 的新手,
谢谢!
最佳答案
你错过了 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>
}
}
关于javascript - Array.map 未在 React Native 中呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58020310/