使用 useEffect 和 useState 在 React JS 中出现无限循环错误

Question

First, I'd like to precise this is one of my first React projects so I'm quite uncomfortable with it, and especially when it comes to treating with APIs.

My goal here is to create a filter that updates the URL in the fetch so that I can ask the API details about movies, for example search movies that are exclusively Drama genre, by checking a checkbox.

My code is getting an infinite loop error and despite searching a lot through the net I couldn't find any help about my problem, so I came here to request your help haha.

Thank you so much in advance.

function List() {
    const [movies, setMovies] = useState([])
    const [dbLink, setDbLink] = useState('')

    let genre = []

    useEffect(() => {
        fetch(dbLink)
            .then(response => response.json())
            .then(json => setMovies(json))
    }, [movies.results])

    const assembleLink = () => {
        const main = 'https://api.themoviedb.org/3/discover/movie?api_key='
        const apiKey = 'xxx'
        let genres = ''
        let genresComponent = ''

        if (genre != []) {
            genre.forEach(key => {
                genres = genres + key + ','
                console.log(genres)
            });
            genresComponent = '&with_genres=' + genres
        }

        setDbLink(main + apiKey + genresComponent)
        console.log(dbLink)
    }

    const addGenre = (genreID) => {
        genre.push(genreID)
        assembleLink()
        console.log("Changed!")
    }

    if (movies.results) {
        console.log(movies)
        console.log(movies.results)
    }

Answer 1

Using movies or any nested property of it as a dependency in an useEffect callback that updates that state will likely cause the render looping you see.

useEffect(() => {
  fetch(dbLink)
    .then(response => response.json())
    .then(json => setMovies(json)) // <-- updates movies state
}, [movies.results]) // <-- movies state dependency

It seems like you should have a dependency on the dbLink state, that when it updates you fetch movies.

useEffect(() => {
  fetch(dbLink)
    .then(response => response.json())
    .then(json => setMovies(json))
}, [dbLink])