Meteor / ReactJS - Problem mit dem Blinken der Benutzeroberfläche:Zweimaliges Rendern vor und nach dem Überprüfen einer Datenbank

Ihr Container abonniert Daten und überwacht, ob das Abonnement ready ist Zustand:

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

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

Das bedeutet, dass Ihre Komponente ein boolesches loading erhält prop, die angibt, ob die Daten verfügbar sind oder nicht. Sie können es in Ihrer Komponente verwenden, um ein loading zu rendern ansehen, während die Daten geladen werden:

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

oder jede andere Kombination von Komponenten, die vom Ladezustand abhängt.

Übrigens, die tasks prop ist ein Array, also wird tasks.length verwendet statt Object.keys ist wahrscheinlich besser.