메인 페이지 오류

tmdb 메인 페이지 -> 다른 페이지 -> 뒤로가기 || logo 클릭시 무한 로딩 되는 에러 발생

useState 수정

메인 페이지에 적용된 컴포넌트를 하나씩 지워가며 디버깅해보다

UpcomingList(최신예고편) 컴포넌트가 없으면 에러가 사라지는 것을 확인

  useEffect(() => {
    const getVideoList = async () => {
      let data = await getVideos(movieList);
      let idresults = data.map((obj) => obj.data);
      let results = idresults.map((obj) => obj.results);
      let resultdata = results.map((obj) =>
        obj[0] !== undefined ? obj[0] : {}
      );
      const delIndex = resultdata.map((video, idx) =>
        video.key === undefined ? idx : 1000
      );
      setMovieList(
        movieList.map((movie, idx) => idx !== delIndex[idx] && movie)
      );
      setVideoList(
        resultdata.map((video, idx) => idx !== delIndex[idx] && video)
      );
    };
    getVideoList();
    //movieList가 업데이트 될 때마다 useEffect 실행하여 무한루프 빠지는 것으로 추측
  }, [movieList]);

// 수정 후
  useEffect(() => {
    const getVideoList = async () => {
      let data = await getVideos(movieList);
      let idresults = data.map((obj) => obj.data);
      let results = idresults.map((obj) => obj.results);
      let resultdata = results.map((obj) =>
        obj[0] !== undefined ? obj[0] : {}
      );
      const delIndex = resultdata.map((video, idx) =>
        video.key === undefined ? idx : 1000
      );
      // const [movieListV, setMovieListV] = useState([]);
      // 새로운 상태 생성하여 movieList 할당, 무한루프 막음
      setMovieListV(
        movieList.map((movie, idx) => idx !== delIndex[idx] && movie)
      );
      setVideoList(
        resultdata.map((video, idx) => idx !== delIndex[idx] && video)
      );
    };
    getVideoList();
  }, [movieList]);