如何解决无法在 ReactNative 上的初始调用数组
我有以下屏幕：
Jugador 详细信息屏幕
import React,{ useState,useCallback,useEffect } from 'react';
import { ScrollView,Text,Image,StyleSheet,View,ActivityIndicator } from 'react-native';
import { useSelector,useDispatch } from 'react-redux';
import { MaterialCommunityIcons as Ionicons } from '@expo/vector-icons';
import Flag from 'react-native-flags';
import * as userActions from '../store/actions/jugadores';
import Colors from '../constants/Colors';
const ProductDetailScreen = props => {
const playerId = props.route.params.id;
const estadId = props.route.params.statId;
const selectedPlayer = useSelector(state => state.jugadores.availablePlayers.find(prod => prod.id === playerId));
const [isLoading,setIsLoading] = useState(false);
const [error,setError] = useState();
const dispatch = useDispatch();
useEffect(() => {
setIsLoading(true)
if (estadId) {
dispatch(userActions.fetchEstadistica(estadId));
setIsLoading(false);
}
},[estadId]);
const goles = useSelector(state => state.jugadores.playerGoals);
const juegos = useSelector(state => state.jugadores.playerGames);
const tarjetas = useSelector(state => state.jugadores.playerCards);
// if(!isLoading){
// console.log('*****');
// console.log(goles);
// console.log('----');
// console.log(juegos);
// console.log('----');
// console.log(tarjetas);
// console.log('*****');
// }
if (typeof goles === 'undefined' || typeof juegos === 'undefined' || typeof tarjetas === 'undefined' || isLoading) {
return <View style={styles.centered} >
<ActivityIndicator size='large' color={Colors.primary} />
</View>
}
return (
<ScrollView>
<Image style={styles.image} source={{ uri: selectedPlayer.imagen }} />
<View style={styles.dataContainer}>
<Text style={styles.description}>Numero: <Text style={styles.subtitle}>{selectedPlayer.numero}</Text></Text>
<Text style={styles.description}>Nombre Completo: <Text style={styles.subtitle}>{selectedPlayer.nombre_completo}</Text></Text>
<Text style={styles.description}>Posicion: <Text style={styles.subtitle}>{selectedPlayer.posicion}</Text> </Text>
<Text style={styles.description}>Edad: <Text style={styles.subtitle}>{selectedPlayer.edad}</Text></Text>
<Text style={styles.description}>Nacionalidad: <Text style={styles.subtitle}>{selectedPlayer.nacionalidad}</Text></Text>
<Flag code={selectedPlayer.iso_code} size={32} style={styles.flag} />
{isLoading ?
<View style={styles.centered} >
<ActivityIndicator size='large' color={Colors.primary} />
</View> :
isNaN(selectedPlayer.numero) ?
null :
<View style={styles.estatsContainer}>
<View style={styles.campoDeDatos}>
<Ionicons name="soccer" size={30} color="white" />
<Text style={styles.estastData}>{goles[0].total}</Text>
</View>
<View style={styles.campoDeDatos}>
<Ionicons name="soccer-field" size={30} color="white" />
<Text style={styles.estastData}>{juegos[0].apperences}</Text>
</View>
<View style={styles.campoDeDatos}>
<Ionicons name="clock-fast" size={30} color="white" />
<Text style={styles.estastData}>{juegos[0].minutes_played}</Text>
</View>
<View style={styles.campoDeDatos}>
<Ionicons name="cards" size={30} color="yellow" />
<Text style={styles.estastData}>{tarjetas[0].yellow}</Text>
</View>
<View style={styles.campoDeDatos}>
<Ionicons name="cards" size={30} color="red" />
<Text style={styles.estastData}>{tarjetas[0].red}</Text>
</View>
</View>
}
</View>
</ScrollView>
);
};
export const screenOptions = navData => {
return {
headerTitle: navData.route.params.nombre,}
};
const styles = StyleSheet.create({
image: {
width: '100%',height: 300,},subtitle: {
fontSize: 16,textAlign: 'justify',marginVertical: 15,fontWeight: 'normal',description: {
fontSize: 16,textAlign: 'center',fontWeight: 'bold',dataContainer: {
width: '80%',alignItems: 'center',marginHorizontal: 40,actions: {
marginVertical: 10,estatsContainer: {
width: '100%',backgroundColor: Colors.primary,justifyContent: 'center',shadowColor: 'black',shadowOpacity: 0.26,shadowOffset: { width: 0,height: 2 },shadowRadius: 8,elevation: 5,borderRadius: 10,flexDirection: 'row',estastData: {
color: '#F3F4F5',fontSize: 23,marginRight: 5,campoDeDatos: {
flexDirection: 'row',flag: {
marginBottom: 10,centered: {
flex: 1,});
export default ProductDetailScreen;
此代码有效，但在我们调用屏幕的第二个渲染时，看到问题是使用 useEffect 调用的部分使用调用函数 fetchEstadistica(estadId); 然后我调用我的渲染代码：
{isLoading ?
<View style={styles.centered} >
<ActivityIndicator size='large' color={Colors.primary} />
</View> :
isNaN(selectedPlayer.numero) ?
null :
<View style={styles.estatsContainer}>
<View style={styles.campoDeDatos}>
<Ionicons name="soccer" size={30} color="white" />
<Text style={styles.estastData}>{goles[0].total}</Text>
</View>
<View style={styles.campoDeDatos}>
<Ionicons name="soccer-field" size={30} color="white" />
<Text style={styles.estastData}>{juegos[0].apperences}</Text>
</View>
<View style={styles.campoDeDatos}>
<Ionicons name="clock-fast" size={30} color="white" />
<Text style={styles.estastData}>{juegos[0].minutes_played}</Text>
</View>
<View style={styles.campoDeDatos}>
<Ionicons name="cards" size={30} color="yellow" />
<Text style={styles.estastData}>{tarjetas[0].yellow}</Text>
</View>
<View style={styles.campoDeDatos}>
<Ionicons name="cards" size={30} color="red" />
<Text style={styles.estastData}>{tarjetas[0].red}</Text>
</View>
</View>
}
我在第一次使用时遇到错误：
TypeError: undefined 不是对象（评估“goles[0].total”）
但是，如果我在第一次渲染时注释掉最后一个代码块，然后取消注释它会填充 goles 数组并在我的应用程序上显示该块，我认为它与异步代码有关，但是我试过了方法：
const loadEstad = useCallback (async (param) => {
setError(null);
setIsRefreshing(true);
try {
await dispatch(userActions.fetchEstadistica(param));
} catch (err){
setError(err.message);
}
setIsRefreshing(false);
},[dispatch,setIsLoading,setError]);
useEffect(() => {
setIsLoading(true);
loadEstad(estadId).then(() => {
setIsLoading(false);
});
},loadEstad]);
仍然发生同样的情况，任何想法为什么会这样，以及是否有办法解决它。
谢谢。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
