Question

我需要在完成componentDidMount函数的请求后调用我的组件的render函数。

componentDidMount(){    
    let ctx = this;
    ApiService.get('/busca/empresa/pagina').then(function(response){
      if(response.data.empresa){
        ctx.setState({company:response.data.empresa});
        ctx.getProducts();
        ctx.verifyAuthentication();
      }
    }, function(error){
       Notification.error('HTTP Status: ' + error.response.status + ' - ' + error.response.data.mensagem);
    });
}

问题是当打开页面时，在componentDidMount完成之前调用render函数。始终从else条件（renderNotValidateCompany）返回函数，并在更新this.state.company后返回renderValidateCompany。

render(){
    if(this.state.company){
      return this.renderValidateCompany();
    }else{
      return this.renderNotValidateCompany();
    }
}

只有在reactD中完成componentDidMount后才能调用渲染吗？

谢谢！

Answer 1

就像我在评论中所说，在州内存储请求状态并根据它进行渲染：

this.state = {
  company:null,
  requestCompleted:false,
}

在渲染方法中：

render(){
 if(this.state.requestCompleted && this.state.company){
    return this.renderValidateCompany();
  }
 else if (this.state.requestCompleted){
    return this.renderNotValidateCompany();
  }
 else {
  return <LoadingGif />
  {/*or return null*/}
 }
}

承诺中的当前更新请求状态。

Answer 2

我看到你的问题是由于对Javascript如何工作的轻微错觉。

您的要求是：

步骤1：用户通过导航打开组件
第2步：安装组件
第3步：调用componentDidMount并完成异步功能
第4步：调用渲染函数。

想一想，第3步是异步步骤，这意味着它不会阻止任何其他步骤。考虑一个PHP页面，它有一些来自服务器的数据，你通过变量，当你把变量占位符放在正确的位置时，渲染器由服务器处理，最后的结果被发回。但这不是这种情况，你的html文件已经在这里了，我们正在谈论对此进一步更新。 因此阻止渲染功能不是您正在寻找的模型。

有什么可能的解决方案？

在此期间渲染中间件（加载器）等待状态更新，当状态更新时，使用新状态调用渲染。 @ jan-ciolek已经做到了。
将API调用向上移动梯形图，这意味着在检索数据之前不要将组件安装在父容器中。基本上，除非此API调用成功，否则不会调用渲染，您可以为此目的创建容器元素。然后将数据作为props传递给所需的组件。
如果你正在寻找一个hack，你定义一个返回空div的函数，并重新定义函数以在API调用完成时返回所需的Component。当你执行setState时，组件将再次渲染新功能的定义。

如何在ReactJS

2 个答案: