React/Next 状態を更新し、useEffect 後にリセットする

Question

API からデータをストリーミングしようとしていますが、レンダリング中に useEffect が複数回呼び出されます。最初のページの読み込み中は、複数回呼び出される以外はすべて正常に動作していますが、ページを更新すると、ブラウザでも同じことが起こりますが、読み込み後に teamData も null に設定されます。

リーリー

ステータスはコードの残りの部分でのみ参照されますが、このスニペットの後に実際に再度設定されることはありません。 React/Next が teamData を null にリセットしないようにするにはどうすればよいですか。また、おまけに、useEffect を 1 回だけ呼び出すようにするにはどうすればよいですか?

Answer 1

useEffect には依存関係として id があるため、id の値が複数回変更され、コンポーネントが再レンダリングされるのではないかと思います。ただし、このスニペットではあまり情報が表示されないため、より多くの情報を共有することをお勧めします。

サーバー側の小道具を使用しないのはなぜですか?以下の例を参照してください。

リーリー

Answer 2

効果が複数回トリガーされる理由は 2 つあります。

1. Next.js ページ ルーターのクエリ パラメーターは、初期レンダリング中に定義されていません - https://nextjs.org/docs/pages/api-reference/functions/use-router#router-object

2. React 18 厳密モード使用時に開発モードでコンポーネントをアンインストールして再インストールする - https://react.dev/blog/2022/03/08/react-18-upgrade-guide# updated-to -strict-mode

エフェクトを次のように書き換えることで問題が解決するかどうかを確認してください。

リーリー