无法访问状态,但我在调试器上看到它
Cannot access the state but i see it on debbugger
我有获取数据的功能,我setState
将数据放入我的状态。
但我不明白如何在我的 render()
中使用它
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
})
})
}
componentDidMount(){
this.getFixture()
}
如果我在我的渲染中执行 console.log(this.state.data);
会在控制台中显示这个(在图像连接中)
如果我这样做 console.log(this.state.data.elapsed);
正在工作并且我得到了值但是如果我这样做 console.log(this.state.data.awayTeam.logo);
我得到 无法读取 属性 'logo'
我不明白为什么。
Screenshot
这是所有代码,我想要的是使用从我的数据状态到渲染的所有数据:
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>
);
}
}
尝试像这样登录setState回调
this.setState({
data:reponseJson,
isLoading:false
}, () => {
console.log(this.state.data.awayTeam.logo)
})
在初始渲染中,this.state.data 尚未设置,因此如果您尝试在不进行空检查的情况下访问它,将会出现错误。
在你的 jsx 中,你可以像这样立即检查 this.state.data 是否是假的,如果它是假的 return:
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>
)
}
我有获取数据的功能,我setState
将数据放入我的状态。
但我不明白如何在我的 render()
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
})
})
}
componentDidMount(){
this.getFixture()
}
如果我在我的渲染中执行 console.log(this.state.data);
会在控制台中显示这个(在图像连接中)
如果我这样做 console.log(this.state.data.elapsed);
正在工作并且我得到了值但是如果我这样做 console.log(this.state.data.awayTeam.logo);
我得到 无法读取 属性 'logo'
我不明白为什么。
Screenshot
这是所有代码,我想要的是使用从我的数据状态到渲染的所有数据:
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>
);
}
}
尝试像这样登录setState回调
this.setState({
data:reponseJson,
isLoading:false
}, () => {
console.log(this.state.data.awayTeam.logo)
})
在初始渲染中,this.state.data 尚未设置,因此如果您尝试在不进行空检查的情况下访问它,将会出现错误。
在你的 jsx 中,你可以像这样立即检查 this.state.data 是否是假的,如果它是假的 return:
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>
)
}