Reactjs 带有db响应的If语句

打开了一个新的问题：

新的问题有更详细的例子

---

Meteor+ReactJS应用程序：我需要检查数据库（集合）是否已经有值，并根据它决定显示什么

以下是我所拥有的：

render() {

    if (this.props.companies.length) {
        return (
          <div className="container">

            {this.renderCompanies()}

          </div>
        );
    } else {
        return (
          <div className="container">

            <header id="addCompanyForm">
              <h1>Add Company</h1>

              <form onSubmit={this.handleSubmit.bind(this)} >
                <input
                  type="text"
                  ref="companyName"
                  className="form-control"
                  placeholder="Type a new company name"
                />
              </form>
            </header>

          </div>
        );
    }
  }

render（）{
如果（此.props.companys.length）{
返回(
{this.renderCompanies（）}
);
}否则{
返回(
添加公司
);
}
}

---

我的问题是：this.props.companys.length是0，0，如果我的收藏中已经有一家公司，它将第三次变为1。因此，它在第一秒钟显示表单，然后在最终接收到集合值和对公司详细信息的更改时隐藏表单。我如何才能在第一秒钟消除闪烁，并立即显示正确的语句。我也尝试了React lifecycles+sessions，但没有任何帮助。

从听起来的情况来看，您有一个ajax调用正在进行，它将获取所有公司，而在这一过程中，公司的长度是0，它将呈现表单。一旦api响应返回，公司就会被信息填充，表单就会消失

如果是我，当api调用发生并显示某种占位符时，我会有一个加载状态，占位符显示加载正在发生，然后在加载完成时，呈现实际组件，检查是否有公司，如果有，否则显示表单

您不必制作第三个组件，您可以执行以下操作：

render() {
 // depending where the ajax call is happening would depict if this is a state or a prop for loading...
  if (this.props.loading) {
    return <div> Loading companies...</div>
  }

  // rest of your logic goes here for if companies.length
}

render（）{
//根据ajax调用发生的位置，将描述这是一个状态还是加载的道具。。。
如果（本道具装载）{
返回装载公司。。。
}
//剩下的逻辑都是关于if companys.length的
}

您是否使用从数据库中获取数据？是-createContainer（（）=>{…}）Meteor和ReactJS已在标记中指明-无需将它们添加到标题中。这没有帮助，没有区别。它甚至没有尝试为加载语句显示加载div。我基于此创建了另一个问题，并提供了更多详细信息：