Reagieren/Nächster Aktualisierungsstatus und Zurücksetzen nach useEffect

Question

Ich versuche, Daten von einer API zu streamen, aber während des Renderns wird useEffect mehrmals aufgerufen, während beim ersten Laden der Seite alles einwandfrei funktioniert, außer dass es mehrmals aufgerufen wird, aber wenn ich im Browser aktualisiere, passiert auf der Seite in , das Gleiche: aber teamData wird nach dem Laden auch auf null gesetzt.

const router = useRouter();
    const { id } = router.query;

    const [teamData, setTeamData] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        GetTeamData(id).then((value) => {
            setTeamData(value);
            setLoading(false);
            console.log("Got Value")
        })
    }, [id])

Der Status wird nur im Rest des Codes referenziert, aber nach diesem Snippet nie wieder festgelegt. Wie kann ich dafür sorgen, dass React/Next das Zurücksetzen teamData auf null stoppt, und als Bonus, wie stelle ich sicher, dass useEffect nur einmal aufgerufen wird?

Answer 1

useEffect 将 id 作为依赖项，因此我猜测 id 的值会更改多次，从而导致该组件重新渲染。不过，我建议您分享更多信息，因为此代码片段没有显示很多内容。

为什么不使用服务器端道具？请参阅下面的示例。

import type { InferGetServerSidePropsType, GetServerSideProps } from 'next'
 
type Repo = {
  name: string
  stargazers_count: number
}
 
export const getServerSideProps: GetServerSideProps<{
  repo: Repo
}> = async () => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo = await res.json()
  return { props: { repo } }
}
 
export default function Page({
  repo,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
  return repo.stargazers_count
}

Answer 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#updates-to-strict-mode

请查看按如下方式重写您的效果是否可以解决您的问题。

useEffect(() => {
  let shouldCancel = false;

  if (id !== undefined) {
    GetTeamData(id).then((value) => {
      if (!shouldCancel) {
        setTeamData(value);
        setLoading(false);
        console.log("Got Value");
      }
    });
  }

  return () => {
    shouldCancel = true;
  };
}, [id]);