在ComponentDidMount之前重新访问状态

Question

当我尝试访问在ComponentDidMount中设置的状态变量时，react会抛出一个未定义的错误。这是因为我相信当我在api中调用fetch setState和ComponentDidMount时，价值还没有准备好（async的东西）。有没有一种正确的方法来延迟渲染，直到完成setState调用或在调用渲染之前完全更新状态？

Answer 1

我认为下面的代码将为您提供获取数据和渲染工作的基本概念。

class App extends Component {
    state = { 
        data:{},
        loading:true,
        error:null,
     }
     componentDidMount = () => {
        fetch('https://example.com/api/article')
        .then((response) => {
          return response.json();
        })
        .then((json) => {
          this.setState({
            data:json,
            loading:false,    
          }) 
          .catch(error => {
            this.setState({
                error,
                loading:false,
              })  
          });
        });

     }

    render() {
        const {data,error,loading} = this.state;
        if(loading){
            return "Loading ..."
        }
        if(error){
            return "Something went wrong."
        }
        return 'your actual render component or data';
    }
}

export default App;