React-redux：親状態の変更で子コンポーネントの動作をトリガーする問題

Question

新しいファイルがアップロードされた後、ファイルのリストを再取得するために、UploadImagesからDisplayImagesにgalleryReload小道具を渡しています。

DisplayImagesを実行するには、無限ループを起こさずに親の状態変更に対してgetImagesアクションを実行するのに問題があります。私は、画像の最初の表示を得ることができますDisplayImagesで

class UploadImage extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     galleryReload: false 
    }; 
... 
// in render 
<DisplayImages galleryReload={this.state.galleryReload} /> 

：

//works fine on first load 
componentWillMount() { 
    this.props.getImages(this.props.gallery); 
    } 
    } 

私は本当にトラブル再びアクションthis.props.getImages（this.props.gallery）を実行する方法を考え出すを持っていますファイルがアップロードされた後。

Iは{galleryReload：真}の状態を設定しようとしたアップロードがそうような（親に）完成したら：

//onUploadFinished 
this.setState((prevState, props) => ({ 
    galleryReload: true 
})); 

とcomponentWillUpdateおよび他のライフサイクル・メソッドと子に再度結果をフェッチし、私は維持私自身を無限ループのフェッチに陥りました。私は、これは画像の後に一度だけgetImagesを呼び出すために手直しするにはどうすればよい

if (this.props.galleryReload) { 
     this.props.getImages(this.props.gallery); 
     this.setState((prevState, props) => ({ 
     galleryReload: false 
     })); 
    } 

を：ここで

は、私は次のアップロードが完了するまで、さらにフェッチをフェッチしてから停止するように、様々なライフサイクルメソッドに入れるものの一例ですアップロード？

Answer 1

私は同時に反応して還元することで、私は状態を混乱させていることに気付きました。私は親で還元状態を設定していませんでしたが、むしろローカル状態。したがって、親コンポーネントのローカル状態を子コンポーネントからリセットするには、galleryReloadの状態を設定し、子コンポーネントにpropとして渡すコールバック関数を親で使用する必要がありました。

resetGalleryReload() { 
    this.setState({ 
     galleryReload: false 
    }); 
    } 

私も

this.resetGalleryReload = this.resetGalleryReload.bind(this); 

そして、親コンストラクタで設定私は最後にそう

<DisplayImages 
     galleryReload={this.state.galleryReload} 
     resetReloadGallery={this.resetGalleryReload} 
    /> 

のような小道具として子コンポーネントに送信：私の親で

は私が機能を追加しました、私はこの素晴らしい読書のライフサイクルメソッドの使用について自分自身を教育しました： https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/introduction.html

は、だから私はDisplayImagesコンポーネントに

componentDidUpdate(prevProps, prevState) { 
    let val = this.props.galleryReload; 
    if (val) { 
     this.props.getImages(this.props.gallery); 
     this.props.resetReloadGallery(); 
    } 
    } 

I

これを作成しました