我正在尝试从 api 流式传输数据，但是在渲染期间，useEffect 被多次调用，其中在初始页面加载期间，除了被多次调用之外，一切都工作正常，但是当我刷新时在浏览器中的页面上，也会发生同样的情况，但 teamData 在加载后也会设置为 null。
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])
状态仅在代码的其余部分中引用，但在此代码段之后从未实际再次设置。我如何让 React/Next 停止将 teamData 重置为 null，作为奖励，我如何让它只调用 useEffect 一次？
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 }您的效果多次触发有两个原因。
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#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]);