なぜcomponentDidMountがreact.js＆reduxで何度も呼び出されるのですか？

Question

私はcomponentDidMountが最初のレンダリングのために一度だけ呼び出されますが、私はそれが複数回レンダリングされているのを見ています。

私は再帰的ループを作成したようです。

• componentDidMountがデータを受信すると、データ
• をフェッチするためにアクションをディスパッチするには、それは、Reduxの状態にデータを格納するために、成功のアクションを発生させます。
• 親コンポーネントはReduxのストアに接続され、上記ステップにおいてだけ変更エントリのmapStateToProps
• 親は、子コンポーネントのcomponentDidMountが再び呼び出される（プログラム変数を介して選択される）の子コンポーネント
• をレンダリングした反応します
• それはデータ

私はそれが起こっていることだと思うを取得するアクションをdispaches。私は間違っているかもしれません。

ループを停止するにはどうすればよいですか？

プログラムで子コンポーネントをレンダリングするコードは次のとおりです。

function renderSubviews({viewConfigs, viewConfig, getSubviewData}) { 

    return viewConfig.subviewConfigs.map((subviewConfig, index) => { 
    let Subview = viewConfigRegistry[subviewConfig.constructor.configName] 
    let subviewData = getSubviewData(subviewConfig) 

    const key = shortid.generate() 
    const subviewLayout = Object.assign({}, subviewConfig.layout, {key: key}) 
    return (
     <div 
     key={key} 
     data-grid={subviewLayout} 
     > 
     <Subview 
      {...subviewData} 
      /> 
     </div> 
    ) 
    }) 
} 

Answer 1

コンポーネントインスタンスは、一度マウントされ、削除されるとアンマウントされます。あなたの場合、それは削除され、再作成されます。

key小冊子のポイントは、Reactが同じコンポーネントの以前のバージョンを見つけるのを助けることです。そうすれば、新しいコンポーネントを作成するのではなく、新しいコンポーネントで前のコンポーネントを更新することができます。

リアクションは、キーなしで正常に動作することがよくありますが、例外はアイテムのリストです。そこにキーが必要なので、アイテムが再配置、作成、または削除されたときに追跡することができます。

あなたの場合は、あなたのコンポーネントが前のコンポーネントと異なることを明示的に示しています。あなたは各レンダリングで新しいキーを与えています。これにより、Reactは以前のインスタンスを削除済みとして扱います。そのコンポーネントの子どももアンマウントされ、解体されます。

あなたがしなければならないのは、ランダムに鍵を生成することではありません。キーは常に、コンポーネントが表示しているデータのIDに基づいている必要があります。リスト項目ではない場合は、おそらくキーは必要ありません。リストアイテムの場合は、IDプロパティや複数のフィールドの組み合わせなど、データのIDから派生したキーを使用する方がはるかに優れています。

ランダムキーを生成するのが正しいとすれば、Reactはあなたのためにそれを処理していました。

最初のフェッチコードは、リアクションツリーのルート（通常はApp）に配置する必要があります。ランダムな子供の中に入れないでください。少なくともあなたのアプリケーションの存続期間中存在するコンポーネントに配置する必要があります。

componentDidMountに入れる主な理由は、サーバー側のコンポーネントが決してマウントされないため、サーバー上で実行されないためです。これはユニバーサルレンダリングにとって重要です。たとえあなたが今これをやっていなくても、後でこれを行うかもしれないし、それを準備することがベストプラクティスです。