2016-06-30 12 views
2

私はreact、alt.js、およびreact-routerを使用しており、基本的なCRUDでアプリケーションを構築しています。 "Create Item"のメニュー項目があり、それはモーダル(反応ブートストラップを使用して...)を提出し、提出すると、バックエンドでいくつかのモデルを作成するアクションを起動し、browserHistory.pushを実行します反応ルータ文書)が完了すると、新しく作成されたアイテムのアイテムページに移動します。react、react-router、およびasyncデータ読み込み

基本的なケースでは、これは機能します。たとえば、私がメインのアプリケーションページにいる場合、それは動作します。しかし、別の商品の商品詳細ページに既に入っている場合は(/item/1とし、/item/2を作成したので、ページから/item/1にリダイレクトしようとしています)。

そして、私の非同期ロードロジックは(も、アクションの呼び出しは、少なくとも、 fetchItem用) ItemViewPagecomponentDidMountは私がオンラインで見つけることができるすべての例に基づいて、かなり一般的なようだコンポーネントを、反応です。

ページが現在レンダリングされている場合は、コンポーネントがすでにマウントされているため(!)、componentDidMountは呼び出されません。そして私のページURLは/item/2に更新されますが、内容はまだ/item/1です。

私の質問は....です。 componentDidMountからデータロードを開始するのが間違っていますか?反応ルータが新しいIDを設定するので、私はそれを他のライフサイクルメソッド(例えば、componentWillReceiveProps)とするつもりですか?それとも、私はどこからデータロードを撃退しなければならないか、他の場所があるのでしょうか?(例えば、反応ルータには、これを処理していることに気づいていない機能がありますか?

+0

['ShouldComponentUpdate'](https://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate)は私の推測ですが、コードを投稿した方が良いでしょう。 –

+0

それは多分コードでしょう、おそらく!しかし、とにかく質問をタイプするだけで私は 'componentWillReceiveProps'を試しました。そして、' if(this.props.params.id!== newProps.params.id){this.props.fetchItem(newProps.params。 id); } '、これは動作するようです。それは私が推測する意味がありますが、それはボックスの外で動作しないことが驚いて私を捉えました。 – Kevin

+0

あなたの 'params'を知らなくても、どのようにして「すぐに」動くでしょうか?とにかく、うまく働いてうれしいです。おそらく次回は、質問を投稿する前にもっと研究してください;) –

答えて

2

リアクションはスマートなので、ルートにコンポーネントを再利用することが分かっているため、コンポーネントはマウントされたままです。選択したライフサイクルメソッドは、コンポーネントの最初のマウント時に一度呼び出されるため、ジョブを処理できません。

componentWillReceivePropsを使用することをお勧めします。そこには、アイテムのidフィールドが変更されたかどうかを確認できます。つまり、レンダリングする新しいデータがあるため、おそらく更新する必要があります。

関連する問題