在 ComponentDidMount 之前响应访问状态

Question

当我尝试访问在ComponentDidMount 中设置的状态变量时，react 会引发未定义的错误。这是因为我相信当我在ComponentDidMount 中调用提取api 和setState 时，该值还没有准备好（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;