Meteor / ReactJS - Проблем с мигане на потребителския интерфейс:изобразяване два пъти преди и след проверка на база данни

Вашият контейнер се абонира за данни и следи дали абонаментът е 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 вероятно е по-добре.