使用 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 回调中的依赖项来更新该 状态可能会导致您看到的渲染循环。

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

您似乎应该依赖dbLink 状态，当它更新时您会获取电影。

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