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 可能会更好。