Блог

Главная - Вопросы по программированию - Я получаю бесконечный цикл в React useEffect и я в полном замешательстве

Я получаю бесконечный цикл в React useEffect и я в полном замешательстве

#reactjs #react-hooks

#reactjs #реагирующие хуки

Вопрос:

Я работаю с tmdb api, я использовал react useEffect и useContext для второстепенных вещей, и это работает. Я решил использовать api, и он переходит в этот бесконечный цикл каждый раз, когда я пытаюсь его запустить. Я использую axios с useEffects и useContext. Ниже приведен компонент, вызывающий axios

введите описание изображения здесь

 




             function MovieList(props) {
                    useEffect(() => {
                        const getMovies = async () => { };
                      try {
                        const response = await axios.get(movieUrl, { cancelToken: source.token });
                        addMovies(response.data.results);
                        // setLoading(false)
                      } catch (error) {
                        if (axios.isCancel(error)) {
                          console.log('Request canceled', error.message);
                        } else {
                          // handle error
                          throw error
                        }
      }
                        getMovies();
                    }, []);
                
                    return (
                        <React.Fragment>
                            <div className="container-fluid pl-5">
                                <h2 className="white mt-4">{pageTitle}</h2>
                                <div className="row">
                                    {movies.map((movie) => {
                                        return <Movie key={movie.id} movie={movie} />;
                                    })}
                                </div>
                            </div>
                        </React.Fragment>
                    );
                }  

















  


Мой код переходит в бесконечный цикл, и это сводит меня с ума.


И мой контекстный код приведен ниже:








 export const MovieProvider = (props) => {
    const [isFav, setIsFav] = useState(false)
    const [movies, setMovies] = useState([]);
    const [filtered, setFilteredMovies] = useState([])

    const addMovies = (res) => {        
        setMovies([...res]);
    }

    const addFavMovies = (res) => {     
        if(res){ 
        setMovies([...res]);
        }
    }

    const addFilteredMovies = (res) => {        
        setFilteredMovies([...filtered, res]);
    }

    return (
        <MovieContext.Provider value={{
            fav: [isFav, setIsFav],
            movies, addMovies, addFavMovies,
            filtered, addFilteredMovies,
        }}>
            {props.children}
        </MovieContext.Provider>
    )
}

Комментарии:

1. ваш useEffect запускается один раз в жизни для компонента. Поэтому он не может зацикливаться бесконечно. Я уверен, что ваш компонент воссоздается с нуля снова и снова. Причина где-то выше — в одном из его родительских элементов. По предоставленному вами коду трудно сказать точно.

2. откуда movieUrl и addMovies откуда? вы пропустили добавление const {} = useContext(MovieContext) или просто забыли добавить в фрагмент? короче говоря, вам нужно добавить эти deps в массив useEffect deps.

3. addMovies из контекста, и там, где я устанавливаю состояние, оно находится в коде контекста выше. movieUrl — это просто строка API, из которого я извлекаю фильмы