Как передать массив и получить к нему доступ в рамках жизненного цикла реакции

#javascript #arrays #mongodb #reactjs #meteor

#javascript #массивы #mongodb #reactjs #метеор

Вопрос:

Я использую Mongo / Meteor 1.3 / React. В моем простом примере я использую компонент-оболочку React для запроса коллекции Mongo и создания массива. При переходе к дочернему компоненту кажется, что объект массива не готов при вызове конструктора — это означает, что я не могу получить доступ к реквизиту.

Такое ощущение, что это должно быть распространенной проблемой. Должен ли я использовать другой компонент жизненного цикла реакции? Или добавление какой-либо функции ожидания? Любой совет приветствуется!!

Родительский компонент

 export default class BulkMapWrapper extends TrackerReact(React.Component) {

constructor() {
super();
const subscription =  Meteor.subscribe("listing",{sort: {_id:-1}})
this.state = {
eventsData: subscription
}
}


render () {
var markerArray = []
markerArray = ...


return(
<div className="panel panel-default">
<div className="panel-body">
<FourthMap
mapParams = {manyEvents}
markers = {markerArray}
 />
</div>
</div>
)

Дочерний компонент

 export default class GooleMapComponent extends Component {
constructor(props){
super(props)
console.log(this.props.markers);

1. является ли эта строка Meteor.subscribe(«listing»,{sort: {_id:-1}}) асинхронной?

2. Я считаю, что это не асинхронно, я проверил это, добавив следующую строку this.state = { ready: subscription.ready(), eventsData: subscription } . this.state.ready остается равным false, хотя я могу запросить коллекцию из консоли…

Ответ №1:

Вы должны использовать функцию componentDidMount для получения данных, а затем установить новое состояние с полученными данными.

 class GetData extends React.Component {
  constructor(props) {
   super(props);
   this.state = {};
  }

  componentDidMount() {
     const subscription =  Meteor.subscribe("listing",{sort: {_id:-1}});

     this.setState({
       eventsData: subscription
     });
  }
}

Затем вы можете передать состояние из GetData компонента в качестве реквизита его дочерним элементам или явно другому компоненту в render функции.

Обычно так вы должны обрабатывать AJAX-запросы в React, но я не уверен, что это будет хорошо переведено для использования в Meteor.