next.js无限加载

npm i react-intersection-observer --save

import { useState, useEffect, memo, useCallback } from 'react'

import styles from '../../styles/home.module.css'

import { InView } from 'react-intersection-observer';
const pageSize=10;
function home(props) {
    const [loading, setloading] = useState(0);//0默认 1加载按钮  2加载完毕
    const [list, setlist] = useState([]);
    const [page, setpage] = useState(1);
    const [pageTotal, setpageTotal] = useState(0);
    const [pageMax, setpageMax] = useState(1);


    async function bindinView(inView, entry) {
        console.log("bindinView", inView);
        if (inView == true) {
            //const body = await _apipushList(page + 1, pageSize);
            //if (body.code == 0) {
               // setpage(page + 1)
               // const prolist = list.concat(body.data.lists);
              //  setlist(prolist);
            //}
        }
    }

    return (
        <>
        <ul>
         <li>aaa</li>
         <li>bbb</li>
         <li>ccc</li>
         <li>ddd</li>
        </ul>
{list.length>0?
                  <>
                  {list.length <= pageSize?'':
                    page < pageMax?
                    <InView as="div" className={styles.project_ul_loading} onChange={bindinView}>
                                <Icon name="icon-Loading" className={`ui_loading_button ${styles.map_loading_iconbtn}`}></Icon>
                    </InView>:<div className={styles.project_ul_loading}><p>加载完毕</p></div>
                  }
                  </>
                  :
                  <div className={styles.project_ul_loading}><p>没有数据</p></div>
                  }
        </>
    )
}
export default home

//css

.project_ul_loading{
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
}

//加载动画效果,加载icon上面
.ui_loading_button{
  display: block;
  width: 24px;
  height: 24px;
  -webkit-animation: fa-spin 1s infinite linear;
  animation: fa-spin 1s infinite linear;
  transform-origin: center;
}
@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}