react项目实战学习笔记-学习40-列表数据请求和渲染

最新推荐文章于 2024-06-22 10:30:28 发布

前端歌谣

最新推荐文章于 2024-06-22 10:30:28 发布

阅读量468

点赞数 2

文章标签： react.js 学习 javascript

本文链接：https://blog.csdn.net/qq_41632427/article/details/126374428

版权

React项目实战-hook+react17-企业案例专栏收录该内容

61 篇文章 0 订阅

订阅专栏

loading=false才能渲染出来

import React, { useState, useEffect } from 'react'
import { List, Skeleton, Pagination, Button, message } from 'antd';
import { ArticleListApi, ArticleDelApi } from '../request/api'
import {useNavigate} from 'react-router-dom'
import moment from 'moment'

export default function ListList() {
  const [list, setList] = useState([])
  const navigate = useNavigate()
  const [update, setUpdate] = useState(1)
  const [total, setTotal] = useState(0)
  const [current, setCurrent] = useState(1)
  const [pageSize, setPageSize] = useState(10)

  // 请求封装
  const getList = (num) => {
    ArticleListApi({
      num,
      count: pageSize
    }).then(res => {
      if (res.errCode === 0) {
        let { arr, total, num, count } = res.data;
        setList(arr);
        setTotal(total);
        setCurrent(num);
        setPageSize(count);
      }
    })
  }

  // 请求列表数据  componentDidMount
  useEffect(() => {
    getList(current)
  }, [])

  // 模拟componentDidUpdate
  useEffect(() => {
    getList(current)
  }, [update])

  // 分页
  const onChange = (pages) => {
    getList(pages);
  }

  // 删除
  const delFn = (id) => {
    // ArticleDelApi({id}).then(res=>{
    //   if(res.errCode===0){
    //     message.success(res.message)
    //     // 重新刷页面，要么重新请求这个列表的数据   window.reload   调用getList(1)  增加变量的检测
    //     setUpdate(update+1)
    //   }else{
    //     message.success(res.message)
    //   }
    // })
  }

  return (
    <div className='list_table' style={{ padding: '20px' }}>
      <List
        className="demo-loadmore-list"
        itemLayout="horizontal"
        dataSource={list}
        renderItem={item => (
          <List.Item
            actions={[
              <Button type='primary' onClick={()=>navigate('/edit/'+item.id)}>编辑</Button>, 
              <Button type='danger' onClick={()=>delFn(item.id)}>删除</Button>
            ]}
          >
            <Skeleton loading={false}>
              <List.Item.Meta
                title={<a href="!#">{item.title}</a>}
                description={item.subTitle}
              />
              <div>{moment(item.date).format("YYYY-MM-DD hh:mm:ss")}</div>
            </Skeleton>
          </List.Item>
        )}
      />
      <Pagination style={{float: 'right',marginTop: '20px'}} onChange={onChange} total={total} current={current} pageSize={pageSize} />
    </div>
  )
}