Question

当我尝试访问在ComponentDidMount中设置的状态变量时，react引发未定义的错误。这是因为我相信，当我在api中调用抓取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;

在ComponentDidMount之前反应访问状态

1 个答案: