React/Next 업데이트 상태 및 useEffect 후 재설정

Question

API에서 데이터를 스트리밍하려고 하는데 렌더링 중에 useEffect가 여러 번 호출되는데 초기 페이지 로드 중에는 여러 번 호출되는 것을 제외하면 모든 것이 잘 작동하지만 브라우저를 새로 고치면 페이지에서도 같은 일이 발생합니다. , 그러나 teamData도 로드 후 null로 설정됩니다.

으아악

상태는 코드의 나머지 부분에서만 참조되며, 이 코드 조각 이후에는 실제로 다시 설정되지 않습니다. React/Next가 teamData를 null로 재설정하지 않게 하려면 어떻게 해야 하나요? 그리고 보너스로 useEffect를 한 번만 호출하게 하려면 어떻게 해야 하나요?

Answer 1

useEffect에는 id가 종속성으로 있으므로 id의 값이 여러 번 변경되어 구성 요소가 다시 렌더링되는 것 같습니다. 하지만 이 스니펫에는 많은 정보가 표시되지 않으므로 더 많은 정보를 공유하는 것이 좋습니다.

서버측 소품을 사용하면 어떨까요? 아래 예를 참조하세요.

으아악

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

다음과 같이 효과를 다시 작성하면 문제가 해결되는지 확인하세요.

으아악