React/Next kemas kini keadaan dan set semula selepas useEffect

Question

Saya cuba menstrim data daripada api, tetapi semasa pemaparan, useEffect dipanggil beberapa kali, di mana semasa memuatkan halaman awal, semuanya berfungsi dengan baik kecuali dipanggil beberapa kali, tetapi apabila saya menyegarkan penyemak imbas Pada halaman dalam , perkara yang sama berlaku, tetapi teamData juga ditetapkan kepada batal selepas dimuatkan.

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])

Keadaan hanya dirujuk dalam kod yang selebihnya, tetapi tidak pernah ditetapkan lagi selepas coretan ini. Bagaimanakah saya boleh membuat React/Next stop tetapan semula teamData kepada null, dan sebagai bonus, bagaimanakah saya boleh membuatnya hanya memanggil useEffect sekali?

Answer 1

useEffect mempunyai id sebagai kebergantungan, jadi saya rasa nilai id berubah beberapa kali, menyebabkan komponen itu dipaparkan semula. Walau bagaimanapun, saya mengesyorkan anda berkongsi maklumat lanjut kerana coretan ini tidak banyak dipaparkan.

Mengapa tidak menggunakan prop sisi pelayan? Lihat contoh di bawah.

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

Ada dua sebab mengapa kesan anda tercetus beberapa kali.

1. Parameter pertanyaan penghala halaman Next.js tidak ditentukan semasa pemaparan awal - https://nextjs.org/docs/pages/api-reference/functions/use-router#router-object

2. React 18 Nyahpasang dan pasang semula komponen dalam mod pembangunan apabila menggunakan mod ketat - https://react.dev/blog/2022/03/08/react-18-upgrade-guide#updates-to-strict-mod

Sila lihat jika menulis semula kesan anda seperti berikut menyelesaikan masalah anda.

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]);