时间戳

首页 > 解决方案 > React 中的无限滚动

reactjs - React 中的无限滚动

问题描述

我正在尝试在我的组件中添加无限滚动。我以某种方式做到了，但它没有按预期工作。每当我滚动到底部时，它会添加更多数据，APIData但它只是复制已经获取的数据，而不是添加新数据。而且，即使我处于底部，滚动功能仍然会运行并一次又一次地获取已经获取的数据。而且我还收到一个警告，说我没有包含getData在依赖数组中。发生了什么，为什么？

export default function News({ category }) {

    const [APIData, setAPIData] = useState([])

    const [page, setPage] = useState(1)

    const pageSize = 20

    async function getData() {
        let response = await fetch(`https://newsapi.org/v2/top-headlines?country=in&category=${category}&pageSize=${pageSize}&page=${page}&apiKey={APIKey}`)
        let parsedResponse = await response.json()
        setAPIData(APIData.concat(parsedResponse.articles))
    }

    useEffect(() => {
        getData()
    }, [category])

    window.addEventListener('scroll', function () {
        if (window.innerHeight + document.documentElement.scrollTop === document.scrollingElement.scrollHeight && page === 1) {
            setPage(2)
            getData()
            console.log('working')
        }
    }
    )

标签： reactjsreact-functional-component

解决方案

这很可能是由于这个https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

您可以通过控制台验证getData函数中的页面没有

async function getData(category,page) {
    let response = await fetch(`https://newsapi.org/v2/top-headlines?country=in&category=${category}&pageSize=${pageSize}&page=${page}&apiKey={APIKey}`)
    let parsedResponse = await response.json()
    setAPIData(APIData.concat(parsedResponse.articles))
}

useEffect(() => {
    getData(category,page)
}, [category,page])

window.addEventListener('scroll', function () {
    if (window.innerHeight + document.documentElement.scrollTop === document.scrollingElement.scrollHeight && page === 1) {
        setPage(2)

        console.log('working')
    }
}

推荐阅读