IT技术 - 如何处理需要子组件状态的流星数据？ - 吾爱随笔录

将 Meteor 1.3 中的一些代码切换到 ES6+ React 语法。组件需要获取 Meteor 数据，所以我使用 createComponent 来替换 getMeteorData()。问题是，旧的 getMeteorData 使用了组件中的状态，而 createContainer 组件无法访问该状态。

旧代码：

Component = React.createClass({
   mixins: [ReactMeteorData],
   getMeteorData() {
    var mo = this.state.currentMonth;
    var start = newDate(moment(mo).startOf('month'));
    return {
     events:     collections.events.find({
        $or:       qwry,
        startDate: { $gte: start },
        endDate:   { $lte: end }
      }).fetch(),
    }
  },
  render() {
   ...
  }
});

迄今为止的新代码

class Component = React.Component {
 constructor(props) {
  super(props);
 }
 render() {
  ...
 }
}

export default createContainer(({params}) => {
var mo = this.state.currentMonth;
        var start = newDate(moment(mo).startOf('month'));
        return {
         events:     collections.events.find({
            $or:       qwry,
            startDate: { $gte: start },
            endDate:   { $lte: end }
          }).fetch(),
        }
}, Component);

收到错误“无法获得未定义的 currentMonth”，因为它正在尝试访问状态。有什么建议？

// Parent component, setState should go here export default class StateHolder extends React.Component { constructor(params) { super(params); this.state = {myKey: 1}; } incrementKey() { this.setState({myKey: this.state.myKey + 1}); } render() { return <Container myKey={this.state.myKey} onClick={this.incrementKey.bind(this)} />; } } // Child component, renders only class PureComponent extends React.Component { render() { return <div> {this.props.myValue} <button onClick={this.props.onClick}>click me</button> </div>; } } // Decorated child container. // Make sure to use this one in parent component's render() function! let Container = createContainer((props) => { let doc = MyCollection.findOne({someKey: props.myKey}); return { myValue: doc ? doc.someValue : null } }, PureComponent);