React onClick 関数がレンダリング時に起動するのはなぜですか?

React onClick Function Firing on Render

オブジェクトのリストをレンダリングする React コンポーネントを作成する場合、オブジェクトと関数の両方を渡すのが一般的です小道具としてそれらを削除するため。 .map() を使用してオブジェクトを反復処理するのは標準ですが、レンダリング中に onClick 関数が途中で起動する可能性があります。

提供されたコードでは、この問題は、removeTaskFunction が直接呼び出されているという事実に起因しています。 onClick イベントハンドラー内。これは、ボタンをクリックしたときではなく、コンポーネントがレンダリングされるとすぐに関数が実行されることを意味します。

解決策

これを解決するには、関数を渡す必要があります。 onClick へのアロー関数として使用し、時期尚早に呼び出されないようにします。修正された行は次のようになります。

<button type="submit" onClick={() => this.props.removeTaskFunction(todo)}>Submit</button>

ES6 で導入されたアロー関数は、関数が呼び出されるまで実行を遅らせます。 React 0.13.3 以降では、アロー関数が完全にサポートされています。アロー関数を使用すると、onClick ハンドラーは意図したとおり、ボタンが実際にクリックされた場合にのみトリガーされます。

以上がReact onClick 関数がレンダリング時に起動するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。