react-hooks实现简单的loadmore功能

最新推荐文章于 2024-01-09 11:47:14 发布

苍山洱海_fckcpu

最新推荐文章于 2024-01-09 11:47:14 发布

阅读量583

点赞数

分类专栏：前端文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/m0_37636763/article/details/123012538

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这篇博客介绍了一个使用React和axios实现的无限滚动加载功能。通过监听按钮点击事件，结合ES6的扩展运算符(...)，动态合并并更新状态中的数据，实现了分页数据的无缝加载。在初始加载和后续加载更多数据时，都向后台发送POST请求，通过data和page、pageSize参数获取数据。页面结构简洁，加载更多的交互清晰。

摘要由CSDN通过智能技术生成

功能很简单就是点击显示更多按钮显示第二页、第三页。。。。的内容

和分页功能类似，发送得请求数据也是page和pageSize，唯一不同的是页面state

主要用ES6的扩展运算符(...)把之前获取的数据合并起来

const Test = () => {
    const [data, setData] = useState([])
    const loadMoreData = () => {
         axios({
            method:'post'
            data:{},
            url:'.....'
        }).then(res=>{
            setData([...data,...resdata.results])// 重点
        })
    }
    // 第一页数据
    useEffect(()=>{
        axios({
            method:'post'
            data:{},
            url:'.....'
        }).then(res=>{
            setData(res.data.results)
        })
    },[])
    return (
        <div>
          <List className='container-articlelist'
                        header={
                            <div className='lastest-article'>文章列表</div>
                        }
                        itemLayout='vertical'
                        dataSource={data}
                        split={true}
                        renderItem={(item) => {
                            return (
                                <List.Item>略</List.Item>
                            )
                        }}
          />
          <Button onClick={() => { loadMoreData() }}>加载更多</Button>
        </div>
    )
}
export defaults Test