ReactJS - 在渲染组件之前加载数据

Question

在ReactJS中，我正在使用＆＃34; id＆＃34;将路由更改为新的路由，然后基于此＆＃34; id＆＃34;，我必须调用API并获取数据。< / p>

我在componentDidMount和componentWillMount中使用了API调用，并尝试setState()让我的数据处于状态。但他们在我的案子里没有工作。

当我想使用我的数据（来自状态）时问题出在render()部分，数据不存在，因为API调用需要一些时间来更新状态。

这是我的代码：

  componentDidMount() {
    api.get(id).then((response) => {
     this.setState({response,});
  });

通过这种方法，我不需要数据（渲染方法），它最终将处于状态但为时已晚！

如何更改修复加载问题的方法？

Answer 1

您执行此操作的方式，您可以在render方法中验证响应状态对象，如果它为null / empty，则返回<div>Loading...</div>。

当您的状态随后根据响应进行更新时，该组件将自动重新渲染。这次，将填充对象，您可以返回组件HTML。

e.g。

render(){

    if (!this.state.response){
        return <div>Loading...</div>
    }

    return (
        <div>Proper Stuff</div>
    );
}

编辑在网站注释中，如果在构造函数中设置初始状态，则可以确保该对象不为空，但只有空值/空值。这也可能有助于取决于render方法正在做什么，例如

constructor(props){
    super(props);

    this.state = {
        response: {...}
    };
}

Answer 2

您的渲染代码应为

render(){
 return({this.state.response?
          <div> Render your component here</div>: 
          <div> Loading ... </div>});
}

这样，您的组件在拥有数据并显示Loading ...文本之前不会呈现。