État de mise à jour React/Next et réinitialisez-le après useEffect

Question

J'essaie de diffuser des données à partir d'une API, mais pendant le rendu, useEffect est appelé plusieurs fois. Lors du chargement initial de la page, tout fonctionne correctement, sauf qu'il est appelé plusieurs fois, mais lorsque j'actualise le navigateur. Sur la page dans, la même chose se produit, mais teamData est également défini sur null après le chargement.

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

L'état n'est référencé que dans le reste du code, mais n'est jamais réellement défini après cet extrait. Comment puis-je faire en sorte que React/Next arrête de réinitialiser teamData à null, et en prime, comment puis-je lui faire appeler useEffect une seule fois ?

Answer 1

useEffect a id comme dépendance, donc je suppose que la valeur de id change plusieurs fois, provoquant le nouveau rendu du composant. Cependant, je vous recommande de partager plus d'informations car cet extrait ne montre pas grand-chose.

Pourquoi ne pas utiliser des accessoires côté serveur ? Voir exemple ci-dessous.

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

Il y a deux raisons pour lesquelles votre effet se déclenche plusieurs fois.

1. Le paramètre de requête du routeur de page Next.js n'est pas défini lors du rendu initial - https://nextjs.org/docs/pages/api-reference/functions/use-router#router-object

2. React 18 Désinstallez et réinstallez les composants en mode développement lors de l'utilisation du mode strict - https://react.dev/blog/2022/03/08/react-18-upgrade-guide#updates-to-strict-mode

Veuillez voir si la réécriture de votre effet comme suit résout votre problème.

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