使用 useEffect 和 useState 在 React JS 中出現無限循環錯誤

Question

首先，我想准確地說這是我的第一個 React 項目之一，所以我對它很不適應，尤其是在使用 API 處理時。

我的目標是創建一個過濾器，在 fetch 中更新 URL，以便我可以通過選中復選框詢問有關電影的 API 詳細信息，例如搜索專門為戲劇類型的電影。

我的代碼出現無限循環錯誤，盡管在網上搜索了很多，但我找不到任何關於我的問題的幫助，所以我來這里請求你的幫助哈哈。

非常感謝你。

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

使用movies或其任何嵌套屬性作為useEffect回調中的依賴項，更新state可能會導致您看到的渲染循環。

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

似乎您應該依賴dbLink state，當它更新時您會獲取電影。

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