无法访问状态，但我在调试器上看到它答案

【问题标题】：Cannot access the state but i see it on debbugger无法访问状态，但我在调试器上看到它
【发布时间】：2020-03-29 04:51:29
【问题描述】：

我有获取数据的功能，我使用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>




    );
  }


}

【问题讨论】：

标签： reactjs api react-native state native

【解决方案1】：

在初始渲染中，this.state.data 尚未设置，因此如果您尝试在不检查 null 的情况下访问它，则会出现错误。

在您的 jsx 中，您可以检查 this.state.data 是否为假，如果为假，则立即返回，如下所示：

  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>
    )
}

A simple demo in codesandbox

【讨论】：

仍然无法正常工作。在渲染中，如果我这样做this.state.data.awayTeam正在工作，但不是这个this.state.data.awayTeam.logo。似乎我可以访问数据的第一个孩子，但我无法获得所有的树
@YohanZenou 可能是您的 api 中的标志为空
不是因为就像我在 getFixture 函数中所说的那样，当我在函数结束时进行 api 调用时，我执行this.state.data.awayTeam.logo 并且正在工作.. 事情是我无法访问我的所有数组只渲染第一棵树
@YohanZenou 正常，第一次渲染时数据不可用。
@YohanZenou 我更新了答案解释更多，你可以在console.log空检查后，你可以检查答案。

【解决方案2】：

尝试像这样登录setState回调

   this.setState({
      data:reponseJson,
      isLoading:false
   }, () => {
      console.log(this.state.data.awayTeam.logo)
 })

【讨论】：

在 getFixture 函数中我可以访问this.state.data.awayTeam.logo，但不能在渲染中，我更新了我的代码上部。感谢您的帮助！