3

meteor/react が初めてなので、状態変数を初期化する方法がわかりません。

私の問題は、私が取得したいということです

  1. react-meteor-data からの createContainer による私の mongo コレクション (ここで説明されているように)、
  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);
4

1 に答える 1

2

その通りです。データは非同期で読み込まれ、コンストラクターで使用できない場合があります。ただし、渡したコールバック関数createContainerは、データがロードされるときに再度評価され、propsコンポーネントの を自動的に更新します。

この変更をキャッチするcomponentWillReceivePropsには、React コンポーネントに関数を実装します。

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

ドキュメントはこちら: https://facebook.github.io/react/docs/component-specs.html

于 2016-04-18T21:33:35.583 に答える