次のようなコンポーネントがあります (非常に簡略化されたバージョン):
リーリーこのコンポーネントを使用するページを読み込むと、次のエラーが発生します: Uncaught Invariant Violation: Rendered more hooks than the time the 前回のレンダリング。
このエラーの説明を見つけようとしましたが、検索では結(jié)果が返されませんでした。
コンポーネントを少し変更する場合:
リーリーこのエラーはもう表示されません。 renderResults
によって返される jsx に setState
関數(shù)を含めたためでしょうか?この修正が機(jī)能する理由についての説明があれば素晴らしいと思います。
私も同じ問題に遭遇しました。私がやっていることはこれです:
リーリー何が起こっているのかと思いますが、最初のレンダリングでコンポーネントが早期に戻り、useEffect が実行されないということです。 isLoading 狀態(tài)が変化して useEffect が実行されると、エラーが発生します - フックが以前よりも多くレンダリングされます。
簡単な変更で問題は解決しました:
リーリー最初のコード例 (間違ったコード) は onClick
內(nèi)の関數(shù)を呼び出しますが、2 番目のコード例 (実際に動作するコード例) は関數(shù) Gave onClick
を渡すため、修正は機(jī)能します。 。違いは、非常に重要な括弧です。JavaScript では、括弧は「このコードを呼び出す」ことを意味します。
次のように考えてください。最初のコード例では、component
がレンダリングされるたびに renderResults
が呼び出されます。これが発生するたびに、クリックを待つ代わりに setAllResultsVisible(!allResultsVisible)
が呼び出されます。 React は獨(dú)自のスケジュールでレンダリングを?qū)g行するため、これが何回発生するかを判斷する方法はありません。
React ドキュメントより:
注: サンドボックスで最初のコード例を?qū)g行するときに、正確なエラー メッセージを取得できません。私のエラーには無限ループが含まれています。 React の新しいバージョンでは、説明されているエラーが発生する可能性がありますか?