Question

首先，我想确切地说，这是我的第一个 React 项目之一，所以我对它很不舒服，尤其是在处理 API 时。

我的目标是创建一个过滤器来更新提取中的 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])

带有 useEffect 和 useState 的 React JS 中的无限循环错误

1 个答案: