mongodb - Meteor/ReactJS - UI 闪烁问题 : rendering twice before and after checking a database

Question

任务:我需要根据数据库结果显示组件。 问题:它在检查数据库之前渲染组件并显示结果，而不从数据库获取任何信息，并在收到数据库结果后第二次渲染组件，这会导致 UI 闪烁问题*

*在我的示例中(...删除...)我展示了它。添加至少一项任务后，刷新页面并显示“添加任务!”红色 block 在前半秒内可见。

如何解决这个问题？我应该使用“promise”还是可以做其他任何事情来仅在检查数据库后显示结果？

Answer 1

您的容器订阅数据并监视订阅的就绪状态:

createContainer(() => {
  const todosHandle = Meteor.subscribe('tasks');
  const loading = !todosHandle.ready();

  return {
    loading,
    tasks: Tasks.find({}, { sort: { createdAt: -1 } }).fetch(),
  };
}, App);

这意味着您的组件将收到一个 bool 值 loading 属性，指示数据是否可用。您可以在组件中使用它在数据加载时呈现 loading View :

class App extends Component {
  //...
  render() {
    const {loading, tasks} = this.props;
    if (loading) {
      return (
        <div className="spinner">
          Loading...
        </div>
      );
    }
    return (
      <div className="container">
        <header>
          <h1>Todo List</h1>
        </header>
          //...
      </div>
    );
  }
}

或取决于加载状态的任何其他组件组合。

顺便说一句，tasks 属性是一个数组，因此使用 tasks.length 而不是 Object.keys 可能会更好。