Question

任务：我需要根据数据库结果显示组件。问题：它在检查数据库之前呈现组件并在不从数据库获取任何信息的情况下显示结果，并在从数据库收到结果后第二次显示结果，这会产生UI闪烁问题*

*在我的例子中（...删除了......）我展示了它。一旦添加了至少一个任务，刷新页面和＆＃34;添加任务！＆＃34;红色区块将在前半秒显示。

如何解决这个问题？我应该使用＆＃34;承诺＆＃34;或者我只能在检查数据库后才能显示结果吗？

Answer 1

您的容器订阅数据并监控订阅的ready州：

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

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

这意味着您的组件将收到一个布尔loading道具，指示数据是否可用。您可以在组件中使用它来在加载数据时呈现loading视图：

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

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

BTW，tasks道具是一个数组，所以使用tasks.length代替Object.keys可能更好。

Meteor / ReactJS - UI闪烁问题：在检查数据库之前和之后呈现两次

1 个答案: