「再レンダリングが多すぎます。React はレンダリングの数を制限しています」というメッセージが表示されるのはなぜですか?私の無限ループはどこですか

Question

以下のコードを実行すると、「再レンダリングが多すぎます」というエラーが表示されます。何故かはわからない。デュアルスイッチを取り出してユニット（価格など）に基づいて設定すると、機能します。ただし、コードのどこで無限ループが発生するのかわかりません。インターネットでは、useState の使用法が間違っている可能性があると言われています。助けていただければ幸いです。初心者なので、おかしなことをしてしまうかもしれませんが、ご了承ください。何はともあれ、勉強することは素晴らしいことです！ありがとう。

リーリー

クリックされた列に基づいて各列を並べ替え可能にしようとしています。おまけの質問ですが、レンダリング時にヘッダーが下の列と一致しないのはなぜですか。

Answer 1

関数を直接呼び出すのではなく、関数参照を渡す必要があります。 こうすることで、関数はコンポーネントのレンダリング時にすぐに呼び出されるのではなく、イベントが発生したときにのみ呼び出されます。

リーリー

また、sortArray 関数をリファクタリングして読みやすくしました。間違っていたら。邪魔しないでください。 ：D

リーリー

依存関係が変更されていない場合は、useCallback を使用して不要な再レンダリングを防止します

リーリー

これらがお役に立てば幸いです。