Meteor / ReactJS-UIの点滅の問題：データベースをチェックする前後に2回レンダリングする

コンテナはデータをサブスクライブし、サブスクリプションのreadyを監視します 状態：

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

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

これは、コンポーネントがブール値のloadingを受け取ることを意味します データが利用可能かどうかを示すprop。コンポーネントで使用して、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>
    );
  }
}

または、ロード状態に依存するコンポーネントの他の組み合わせ。

ところで、tasks propは配列であるため、tasks.lengthを使用します Object.keysの代わりに おそらくより良いです。