到达 div 底部时渲染组件

Question

我编写了一个组件，可以在网格中呈现来自 API 的一堆数据。完整数组的长度约为 2,000，并保存在上下文 API 中，但我只想呈现用户正在查看的元素。所以我从 48 开始，每当用户到达页面底部时再添加 48。正如预期的那样，16 行的 console.log() 总是在底部触发，但由于某种原因状态没有更新。有人可以向我指出为什么会这样吗？谢谢

import type { NextPage } from 'next'
import React, { useContext, useEffect, useState } from 'react'
import '../styles/Home.module.css'
import DAO from '../components/DAO'
import { DaosContext } from "../context/daos"

const DAO_SCROLL_GROUPS = 48

const Home: NextPage = () => {
  const { daos } = useContext(DaosContext);
  const [daosToRender, setDaosToRender] = useState<number>(DAO_SCROLL_GROUPS)

  const handleScroll = () => {
    const bottom = Math.ceil(window.innerHeight + window.scrollY) >= document.documentElement.scrollHeight
    if (bottom) {
      const newDaoNumber = daosToRender + DAO_SCROLL_GROUPS
      console.log("At the bottom", daosToRender, newDaoNumber)
      setDaosToRender(newDaoNumber)
    }
  }

  useEffect(() => {
    window.addEventListener('scroll', handleScroll, {
    })

    return () => {
      window.removeEventListener('scroll', handleScroll);
    }
  }, [])

  const daoList = daos.splice(0, daosToRender)
  
  return (
    <div className="bg-gradient-to-br from-black to-purple via-black h-100vh flex flex-col justify-between">
      <div className={'flex text-white text-md px-8 mt-4'}>
        <div>DAOs: {daos.length}</div>
      </div>
      <div className="grid xl:grid-cols-6 md:grid-cols-4 gap-4 mt-4 p-8">
        {daoList.map((dao) => {
          return (
            dao && <DAO key={dao.id} space={dao} />
          )}
        )}
      </div>
    </div>
  )
}

export default Home

Answer 1

您正在根据 daoList 进行渲染。将其置于状态并在每次 daosToRender 更新时更新。

例子

const [daoList, setDaoList] = useState([]);

使用 useEffect 更新 daoList 与依赖数组 daosToRender

useEffect(()=>{
   setDaoList(daos.splice(0, daosToRender))
}, [daosToRender, daos]);

到达 div 底部时渲染组件

Render component when reaching bottom of div

reactjs

react-functional-component