Meteor / ReactJS - Sự cố nhấp nháy giao diện người dùng:hiển thị hai lần trước và sau khi kiểm tra cơ sở dữ liệu

Vùng chứa của bạn đăng ký dữ liệu và giám sát ready của đăng ký trạng thái:

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

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

Điều này có nghĩa là thành phần của bạn sẽ nhận được loading boolean prop cho biết dữ liệu có sẵn hay không. Bạn có thể sử dụng nó trong thành phần của mình để hiển thị loading xem trong khi dữ liệu đang tải:

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

hoặc bất kỳ sự kết hợp nào khác của các thành phần phụ thuộc vào trạng thái tải.

BTW, tasks prop là một mảng, vì vậy hãy sử dụng tasks.length thay vì Object.keys có thể tốt hơn.