API からデータをストリーミングしようとしていますが、レンダリング中に useEffect が複数回呼び出されます。最初のページの読み込み中は、複数回呼び出される以外はすべて正常に動作していますが、ページを更新すると、ブラウザでも同じことが起こりますが、読み込み後に teamData も null に設定されます。
ステータスはコードの残りの部分でのみ参照されますが、このスニペットの後に実際に再度設定されることはありません。 React/Next が teamData を null にリセットしないようにするにはどうすればよいですか。また、おまけに、useEffect を 1 回だけ呼び出すようにするにはどうすればよいですか?
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
useEffect には依存関係として id があるため、id の値が複数回変更され、コンポーネントが再レンダリングされるのではないかと思います。ただし、このスニペットではあまり情報が表示されないため、より多くの情報を共有することをお勧めします。
サーバー側の小道具を使用しないのはなぜですか?以下の例を参照してください。
リーリー効果が複数回トリガーされる理由は 2 つあります。
Next.js ページ ルーターのクエリ パラメーターは、初期レンダリング中に定義されていません - https://nextjs.org/docs/pages/api-reference/functions/use-router#router-object
React 18 厳密モード使用時に開発モードでコンポーネントをアンインストールして再インストールする - https://react.dev/blog/2022/03/08/react-18-upgrade-guide# updated-to -strict-mode
エフェクトを次のように書き換えることで問題が解決するかどうかを確認してください。
リーリー