2016-04-11 13 views
1

私はfluxを使用しており、setStatecomponentDidMountにReactネイティブアプリのトップコンポーネント内で試しています。 constructorでは、this.state = MainStore.getData();は状態をうまく設定しているようです。しかし、何らかの理由でthis.setState(data);が私のcomponentDidMountに状態を設定していません。ここで私のフラックスパターンからトップコンポーネントと私の店の私のコードです。compnonentDidMountにネイティブsetStateが反応しません

コンポーネント:

constructor(props) { 
    super(props); 
    this.state = MainStore.getData(); 
} 

componentDidMount() { 
    MainStore.addChangeListener(this._onChange); 
    var data = MainStore.getUpdatedData(); 
    console.log('data from store: ',data) 
    this.setState(data); 
    console.log('state: ',this.state) 
} 

ストア:私はちょうどので、私はテストオブジェクトを使用しています作業の流れを取得しようとしています

var kidsBankData = { 
    test:null 
}; 

var kidsData = assign({}, EventEmitter.prototype, { 
    getData: function() { 
    return kidsBankData; 
    }, 

    getUpdatedData: function(){ 
    newObj = { 
     test:'test' 
    } 
    return newObj; 
    }, 

    emitChange: function() { 
    this.emit(CHANGE_EVENT); 
    }, 

    addChangeListener: function(callback) { 
    this.on(CHANGE_EVENT, callback); 
    }, 

    removeChangeListener: function(callback) { 
    this.removeListener(CHANGE_EVENT, callback); 
    } 
}); 

。私のコンポーネント内では、コンソールログvar data = MainStore.getUpdatedData();である最初のコンソールログはコンソールログtest:'test'に正しく記録されますが、2番目のログでは状態はまだtest:nullであることがわかります。これは最初は店舗からconstructorに返されます。

なぜthis.setState(data)は状態を更新しないのですか?コンソールエラーはなく、状態を設定しません。

答えて

1

状態はcomponentDidMountメソッドの最後でのみ更新されるため、コンソールのconsole.logにはすぐに結果が表示されません。実際、反応フレームワークはすべての状態変化を集約し、一度にすべてを実行します。あなたはこのような何かを行うならば例えば即時、中間の状態の更新はありません。

componentDidMount: function() { 
    // Get obj1 from some store 
    // Get obj2 from another store 
    this.setState(data1: obj1.data, data2: obj2.data) 
} 
:に相当します

componentDidMount: function() { 
    // Get obj1 from some store 
    this.setState(obj1) 
    // Get obj2 from another store 
    this.setState(obj2) 
} 

関連する問題