meteor-reactjs:在构造函数集合中为空
meteor-reactjs: in constructor collection is empty
由于我是 meteor/react 的新手,我不知道如何初始化我的状态变量。
我的问题是我想得到
- 我的 mongo 通过 createContainer 从 react-meteor-data 收集(如 here 所述),
- 使用 initialized prop 初始化状态变量
但是构造函数中的prop是空的。只有当我调用 "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);
没错,数据是异步加载的,在构造函数中可能不可用。但是,您传递给 createContainer
的回调函数会在加载数据时再次求值,它会自动更新组件的 props
。
要捕获此更改,请在 React 组件中实现 componentWillReceiveProps
函数。
componentWillReceiveProps(nextProps) {
this.setState({
lists: nextProps.allLists
});
}
文档在这里:https://facebook.github.io/react/docs/component-specs.html
由于我是 meteor/react 的新手,我不知道如何初始化我的状态变量。
我的问题是我想得到
- 我的 mongo 通过 createContainer 从 react-meteor-data 收集(如 here 所述),
- 使用 initialized prop 初始化状态变量
但是构造函数中的prop是空的。只有当我调用 "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);
没错,数据是异步加载的,在构造函数中可能不可用。但是,您传递给 createContainer
的回调函数会在加载数据时再次求值,它会自动更新组件的 props
。
要捕获此更改,请在 React 组件中实现 componentWillReceiveProps
函数。
componentWillReceiveProps(nextProps) {
this.setState({
lists: nextProps.allLists
});
}
文档在这里:https://facebook.github.io/react/docs/component-specs.html