捕捉されない不変条件違反: 前回のレンダリングよりも多くのフックを使用してレンダリングされました

Question

次のようなコンポーネントがあります (非常に簡略化されたバージョン):

リーリー

このコンポーネントを使用するページを読み込むと、次のエラーが発生します: Uncaught Invariant Violation: Rendered more hooks than the time the 前回のレンダリング。 このエラーの説明を見つけようとしましたが、検索では結果が返されませんでした。

コンポーネントを少し変更する場合:

リーリー

このエラーはもう表示されません。 renderResults によって返される jsx に setState 関数を含めたためでしょうか?この修正が機能する理由についての説明があれば素晴らしいと思います。

Answer 1

私も同じ問題に遭遇しました。私がやっていることはこれです:

リーリー

何が起こっているのかと思いますが、最初のレンダリングでコンポーネントが早期に戻り、useEffect が実行されないということです。 isLoading 状態が変化して useEffect が実行されると、エラーが発生します - フックが以前よりも多くレンダリングされます。

簡単な変更で問題は解決しました:

リーリー

Answer 2

最初のコード例 (間違ったコード) は onClick 内の関数を呼び出しますが、2 番目のコード例 (実際に動作するコード例) は関数 Gave onClick を渡すため、修正は機能します。 。違いは、非常に重要な括弧です。JavaScript では、括弧は「このコードを呼び出す」ことを意味します。

次のように考えてください。最初のコード例では、component がレンダリングされるたびに renderResults が呼び出されます。これが発生するたびに、クリックを待つ代わりに setAllResultsVisible(!allResultsVisible) が呼び出されます。 React は独自のスケジュールでレンダリングを実行するため、これが何回発生するかを判断する方法はありません。

React ドキュメントより:

React 処理イベント ドキュメント

注: サンドボックスで最初のコード例を実行するときに、正確なエラー メッセージを取得できません。私のエラーには無限ループが含まれています。 React の新しいバージョンでは、説明されているエラーが発生する可能性がありますか?