meteor-reactjs: в конструкторе коллекция пуста

Question

В связи с тем, что я новичок в метеоре/реакции, я не могу понять, как инициализировать переменную состояния.

Моя проблема заключается в том, что я хотел бы получить

1. моей коллекции Монго через createContainer от реакции-Метеор-данных (как описано here),
2. использовать инициализированную опору для инициализировать состояние переменной

Но опора в конструкторе пуста. Только когда функция «gotClicked» называется prop.allLists заполняется данными из mongo.

Кто-нибудь знает, почему? Я предполагаю, что данные загружаются асинхронно, так что данные еще не доступны в конструкторе. Что было бы лучшим способом получить данные?

import React, {Component, PropTypes} from 'react'; 
import { createContainer } from 'meteor/react-meteor-data'; 
import {AllLists} from '../api/alllists.js' 
export default class MyList extends Component { 

    constructor(props) { 
     super(); 

     console.log(props.allLists) 
     console.log(this.props.allLists) 
     //allLists is empty 

     this.state = { 
      lists: props.allLists 
     } 
    } 

    gotClicked(){ 
     console.log(this.props.allLists) 
     //allLists is filled 
    } 

    render() { 
     return (
      <div className="container" onClick={this.gotClicked.bind(this)}> 
      </div> 
     ); 
    } 
} 

MyList.propTypes = { 
    allLists: PropTypes.string.isRequired 
} 

export default createContainer(() => { 
    return { 
     allLists: AllLists.find({}).fetch() 
    }; 
}, MyList); 

Answer 1

Вы правы, данные загружаются асинхронно и могут быть недоступны в конструкторе. Однако функция обратного вызова, которую вы пересылаете на createContainer, снова оценивается при загрузке данных и автоматически обновляет props вашего компонента.

Чтобы поймать это изменение, выполните функцию componentWillReceiveProps в компоненте React.

componentWillReceiveProps(nextProps) { 
    this.setState({ 
    lists: nextProps.allLists 
    }); 
} 

Docs здесь: https://facebook.github.io/react/docs/component-specs.html