就像我在评论中所说的那样，将请求状态存储在状态中并基于它进行渲染：

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*/}
 }
}

当然更新 Promise 中的请求状态。

我看到您的问题是由于对 Javascript 的工作方式的轻微错觉。

您的要求是：

1. 第 1 步：用户通过导航打开组件
2. 第 2 步：安装组件
3. 第三步：调用componentDidMount，完成一个异步函数
4. 第 4 步：调用渲染函数。

想想看，第 3 步是一个异步步骤，这意味着它不会阻止其他任何事情。想想一个 PHP 页面，它有一些来自服务器的数据，您通过变量传递这些数据，当您将变量占位符放置在正确的位置时，渲染由服务器处理并发送回最终结果。但事实并非如此，您的 html 文件已经在这里，我们正在讨论对此的进一步更新。所以阻塞渲染功能不是你要找的模型。

对此有哪些可能的解决方案？

1. 渲染中间的东西（ loader ），同时等待状态更新，当状态更新时，渲染会被新状态调用。@jan-ciolek 已经做到了。

2. 将 API 调用向上移动，这意味着在检索到数据之前不要在父容器中安装组件。除非此 API 调用成功，否则基本上不会调用渲染，您可以为此目的创建一个容器元素。然后将数据作为props传递给所需的组件。

3. 如果您正在寻找一个 hack，您可以定义一个返回空 div 的函数，并重新定义该函数以在 API 调用完成时返回您需要的组件。当您执行 setState 时，组件将使用新的函数定义再次呈现。