componentWillUpdateが無限ループを起こさないようにするにはどうすればよいですか？

Question

子コンポーネントに、クリック時にその親関数からコールバックをトリガーするHTML要素があります。コールバックは親コンポーネントの状態を変更します。変更された状態は、次に、if文の条件で使用される親に戻されます。 toggle（親からの小道具）は、ストア内の値を変更するアクションをディスパッチします。しかし、このディスパッチはストアを変更することになり、親コンポーネント内の小道具の1つが子コンポーネントにも渡されます。

この結果、私はこれを自分のコードに挿入すると無限ループに陥ります。

/* no state changes to the current component */ 
    componentWillUpdate(nextProps) { 
    const { 
     // ... some props 
     toggle, // func 
    } = nextProps; 

    if (/* case 1 of 2*/) 
     toggle(true); 
    } else (/* case 2 of 2 */) { 
     toggle(false); 
    } 
    } 

onClickは、上記のステートメントが依存している場合、その親の状態でフィールドを変更するコールバックをトリガするので、私はcomponentWillUpdate（またはいくつかにif文をスローする必要があるが、私はif文を実行することができますAPIに反応します親の状態への変更が完了したら（onClickファンクションコールではなく）

私はクリックした後に1回だけトリガーしたいと思っています。無限にループするにはどうすればよいですか？

Answer 1

私は無限にループしたくありません。これどうやってするの？

propsからnextPropsまでの値を比較します。だから、あなたは必要な時にのみトグルしている。現在のロジックを知らなくても正確なコードを提供するのは難しいです。

if (this.props.src !== nextProps.src) { 
    // toggle logic 
} 

はまた、あなたはおそらく代わりにcomponentWillReceivePropsのこの内部をやりたいので、あなたのトグルが発生した前に、あなたは潜在的にレンダリングされません。

Answer 2

あなたのですループの原因となっている状態変更後の状態をオンクリックではなく変更します。

toggleのロジックに影響を与える状態プロパティを、onClickが状態を変更するのと同じポイントで変更できるようにする必要があります。

stateを実行すると、既にプロパティが正しく設定されており、非ステート関連の動作はtoggle()のみ実行する必要があります。