Reactjs 无法访问状态，但我在Debbuger上看到它
我有一个函数来获取我的数据，我做Reactjs 无法访问状态，但我在Debbuger上看到它,reactjs,api,react-native,state,native,Reactjs,Api,React Native,State,Native,我有一个函数来获取我的数据，我做setState将我的数据放入我的状态 但是我不知道如何在我的render（）中使用它 如果我执行console.log（this.state.data）在控制台中显示（在图像连接中） 如果我执行console.log（this.state.data.appeased）正在工作，我得到了值，但是如果我这样做了console.log（this.state.data.awayTeam.logo）我得到无法读取属性“logo” 我不明白为什么 以下是所有代码，我希望使
setStaterender（）中使用它
如果我执行console.log（this.state.data）在控制台中显示（在图像连接中）
如果我执行console.log（this.state.data.appeased）
正在工作，我得到了值，但是如果我这样做了console.log（this.state.data.awayTeam.logo）我得到无法读取属性“logo”
我不明白为什么
以下是所有代码，我希望使用从数据状态到渲染的所有数据：
getFixture = async () => {
const url = 'http://127.0.0.1:80/testmatch/get_fixture.php';
fetch(url).then((reponse) => reponse.json())
.then((reponseJson) => {
this.setState({
data:reponseJson,
isLoading:false
})
console.log(this.state.data.awayTeam.logo); // WORKING (SHOW ME THE LINK)
})
}
render() {
console.log(this.state.data.awayTeam.logo); // NOT WORKING (CANNOT READ PROPERTY OF UNDEFINED)
return (
<View style={styles.container}>
<View style={styles.containerScore}>
<View style={{flex: 1, flexDirection: 'row', borderColor:'#171F33',borderBottomWidth: 1 }}>
<View style={{flex: 1,paddingTop:7,paddingBottom:7}}>
<View style={{flex: 1}}>
<Image style={{width: 50, height: 50}} source={{uri: "toto"}} />
</View>
</View>
<View style={{flex: 1,paddingTop:7,paddingBottom:7, backgroundColor:'#fff'}}>
<Text style={{fontSize:13}}> {this.state.data.elapsed}</Text>
</View>
<View style={{flex: 1,paddingTop:7,paddingBottom:7, marginLeft:2, backgroundColor:'#000'}}>
<Text style={{fontSize:13}}></Text>
</View>
</View>
<Text style={{color:"#FFF"}}>{} </Text>
</View>
<View style={styles.containerInfo}>
<ScrollableTabView style={{marginTop: 1}} initialPage={0} renderTabBar={() => <CustomTabBar/>} >
<View tabLabel='Tab #1'>
<Text>My</Text>
</View>
<View tabLabel='Tab #2'>
<Text>favorite</Text>
</View>
<View tabLabel='Tab #3'>
<Text>favorite</Text>
</View>
<View tabLabel='Tab #4'>
<Text>favorite</Text>
</View>
</ScrollableTabView>
</View>
</View>
);
}
}
getFixture=async（）=>{
常量url=http://127.0.0.1:80/testmatch/get_fixture.php';
fetch（url）.then（（reponse）=>reponse.json（））
.然后（（reponseJson）=>{
这是我的国家({
数据：reponseJson，
孤岛加载：false
})
console.log（this.state.data.awayTeam.logo）；//正在工作（显示链接）
})
}
render（）{
console.log（this.state.data.awayTeam.logo）；//不工作（无法读取未定义的属性）
返回(
{this.state.data.appeased}
{}
} >
我的
最喜欢的
最喜欢的
最喜欢的
);
}
}
尝试像这样登录setState回调
this.setState({
data:reponseJson,
isLoading:false
}, () => {
console.log(this.state.data.awayTeam.logo)
})
在初始渲染中，this.state.data尚未设置，因此如果您尝试在不检查null的情况下访问它，则会出现错误
在jsx中，您可以检查this.state.data是否为falsy，如果为falsy，则立即返回如下：
render() {
if (!this.state.data) {
return (<View><Text>Loading...</Text></View>);
}
console.log(this.state.data.awayTeam.logo);
return (
<View style={styles.container}>
<View style={styles.containerScore}>
<View style={{flex: 1, flexDirection: 'row', borderColor:'#171F33',borderBottomWidth: 1 }}>
<View style={{flex: 1,paddingTop:7,paddingBottom:7}}>
<View style={{flex: 1}}>
<Image style={{width: 50, height: 50}} source={{uri: "toto"}} />
</View>
</View>
<View style={{flex: 1,paddingTop:7,paddingBottom:7, backgroundColor:'#fff'}}>
<Text style={{fontSize:13}}> {this.state.data.elapsed}</Text>
</View>
<View style={{flex: 1,paddingTop:7,paddingBottom:7, marginLeft:2, backgroundColor:'#000'}}>
<Text style={{fontSize:13}}></Text>
</View>
</View>
<Text style={{color:"#FFF"}}>{} </Text>
</View>
<View style={styles.containerInfo}>
<ScrollableTabView style={{marginTop: 1}} initialPage={0} renderTabBar={() => <CustomTabBar/>} >
<View tabLabel='Tab #1'>
<Text>My</Text>
</View>
<View tabLabel='Tab #2'>
<Text>favorite</Text>
</View>
<View tabLabel='Tab #3'>
<Text>favorite</Text>
</View>
<View tabLabel='Tab #4'>
<Text>favorite</Text>
</View>
</ScrollableTabView>
</View>
</View>
)
}
render（）{
如果（！this.state.data）{
返回（加载…）；
}
log（this.state.data.awayTeam.logo）；
返回(
{this.state.data.appeased}
{}
} >
我的
最喜欢的
最喜欢的
最喜欢的
)
}
在getFixture函数中，我可以访问this.state.data.awayTeam.logo
，但在渲染中，我不更新代码。谢谢你的帮助！它仍然不起作用。在渲染中，如果我执行此操作，this.state.data.awaytem
正在工作，但不是此this.state.data.awaytem.logo
。似乎我可以访问数据的第一个子项，但我无法获取所有数据tree@YohanZenou可能是徽标从您的apinot中变为空，因为正如我在getFixture函数中所说，如果在函数末尾我执行了this.state.data.awayTeam.logo
并且正在工作，则我在调用api时说的那样。。问题是我不能访问渲染中的所有数组，只能访问第一个数组tree@YohanZenou这是正常的，在第一次渲染时数据不可用。@YohanZenou我更新了答案来解释更多，你可以在console.log之后进行空检查，你可以检查答案。
render() {
if (!this.state.data) {
return (<View><Text>Loading...</Text></View>);
}
console.log(this.state.data.awayTeam.logo);
return (
<View style={styles.container}>
<View style={styles.containerScore}>
<View style={{flex: 1, flexDirection: 'row', borderColor:'#171F33',borderBottomWidth: 1 }}>
<View style={{flex: 1,paddingTop:7,paddingBottom:7}}>
<View style={{flex: 1}}>
<Image style={{width: 50, height: 50}} source={{uri: "toto"}} />
</View>
</View>
<View style={{flex: 1,paddingTop:7,paddingBottom:7, backgroundColor:'#fff'}}>
<Text style={{fontSize:13}}> {this.state.data.elapsed}</Text>
</View>
<View style={{flex: 1,paddingTop:7,paddingBottom:7, marginLeft:2, backgroundColor:'#000'}}>
<Text style={{fontSize:13}}></Text>
</View>
</View>
<Text style={{color:"#FFF"}}>{} </Text>
</View>
<View style={styles.containerInfo}>
<ScrollableTabView style={{marginTop: 1}} initialPage={0} renderTabBar={() => <CustomTabBar/>} >
<View tabLabel='Tab #1'>
<Text>My</Text>
</View>
<View tabLabel='Tab #2'>
<Text>favorite</Text>
</View>
<View tabLabel='Tab #3'>
<Text>favorite</Text>
</View>
<View tabLabel='Tab #4'>
<Text>favorite</Text>
</View>
</ScrollableTabView>
</View>
</View>
)
}