MongoDB
 sql >> Base de Dados >  >> NoSQL >> MongoDB

Meteor / ReactJS - problema de intermitência da interface do usuário:renderização duas vezes antes e depois de verificar um banco de dados


Seu contêiner assina os dados e monitora o ready da assinatura Estado:
createContainer(() => {
  const todosHandle = Meteor.subscribe('tasks');
  const loading = !todosHandle.ready();

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

Isso significa que seu componente receberá um loading booleano prop que indica se os dados estão ou não disponíveis. Você pode usá-lo em seu componente para renderizar um loading visualizar enquanto os dados estão carregando:
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>
    );
  }
}

ou qualquer outra combinação de componentes que dependa do estado de carregamento.

BTW, as tasks prop é um array, então usando tasks.length em vez de Object.keys é provavelmente melhor.