как установить начальные значения состояния в конструкторе реагирующих компонентов только после завершения подписки на метеор - PullRequest
Новая
       24

как установить начальные значения состояния в конструкторе реагирующих компонентов только после завершения подписки на метеор

0 голосов
/ 30 сентября 2019

Я использую React и Meteor для своего приложения. Мне нужно инициализировать значения состояния, используя записи из коллекций, однако для возврата записей коллекций требуется метеорная подписка. Из-за этой задержки в получении подписанных записей мои значения состояния в конструкторе компонентов загружаются с неопределенными значениями. Как я могу вызвать конструктор реагирует только после того, как подписка готова. Примечание: я не хочу устанавливать значение setState в методе render после того, как подписка будет готова, я хочу сделать это в самом конструкторе, чтобы я мог сравнить свои исходные значения состояния с последующими обновлениями в коллекциях. 

class DataTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      records: this.props.records
    };
    //since initially records were empty state value is initialised as undefined
    console.log(this.state.records);
  }

  render() {
return something
}
}
export default withTracker(() => {
  //withTracker seems to be giving some issue when rendering the component for first time
  //and giving empty values 
  Meteor.subscribe("records");
  return {
    records: Records.find({}).fetch()
  };
})(DataTable);

1 Ответ

1 голос
/ 30 сентября 2019

Вы можете сделать это, введя промежуточный компонент <Loader>, который обрабатывается, когда данные не готовы. Это только делает ваш компонент, когда у него есть данные. Код будет выглядеть следующим образом: 

const Loader = props => {
  if (props.loading) return <div>Loading...</div>
  // This only gets rendered when we have data
  return <DataTable {...props} />
}

export default withTracker(() => {
  //withTracker runs twice - that is normal
  const subsHandle = Meteor.subscribe("records");
  const loading = !subsHandle.ready()
  return {
    loading, 
    records: Records.find({}).fetch()
  };
})(Loader); // Render the Loader component

Это также означает, что ваш компонент DataTable может иметь необходимые типы PropTypes, например, для props.records

...