Question

打开了一个新问题：Meteor / ReactJS - UI blinking issue: rendering twice before and after checking a database

NEW ISSUE有更详细的例子

Meteor + ReactJS App：我需要检查一个数据库（集合）是否已经有一个值，并根据它确定要显示的内容。

这就是我所拥有的：

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>
        );
    }
  }

我的问题：this.props.companies.length是0,0，如果我的收藏中已经有公司，那么它第三次成为1。因此，它显示第一秒的表单，然后在最终收到集合值和更改公司详细信息时隐藏它。如何在第一秒消除闪烁并立即显示正确的声明。我也尝试过React生命周期+会话，没有任何帮助。

Answer 1

从它的声音来看，你有一个正在取得所有公司的ajax调用，而当发生这种情况时，companies.length为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
}

如果语句带有db响应

1 个答案: