mock list列表组件 以及弹出框邀请成功记录 antd-List滚动加载

List列表在单个页面中分离出组件 mock静态页面

//mock
Mock.mock(/invite\/records/, {
  code: 2000,
  'data|100-300': [{
    'be_invited_user|+1': 1,
    'count':2,
    'phone_num': 18712345678,
    'the_first_login': '2020-02-02 11:52:30'
  }]
})

// 列表中的项目
const InviteRecord = ({ phoneNum, loginData }) => {
  // 单个内容的显示逻辑分离
  const displayPhoneNum = (phoneNum) => {
    const phoneNumStr = String(phoneNum)
    return phoneNumStr.length === 11
      ? `${phoneNumStr.slice(0, 3)}****${phoneNumStr.slice(7)}`
      : ''
  }

  return (
    <div className="invite-record-row">
      <span>{`用户 ${displayPhoneNum(phoneNum)}`}</span>
      <span>{`${loginData} 首次登录`}</span>
    </div>
  )
}

滚动加载list列表

import { useSelector } from 'react-redux';
import React, { useState, useEffect, useRef } from 'react';
import { Modal, Button, List, message } from 'antd';
import request from '@/utils/request'

const [records, setRecords] = useState([]);
 const token = useSelector(state => state.user.token);
/ 获取用于ui渲染的数据
  useEffect(() => {
    const fetchRecords = async () => {
      try {
        setSendSourceCode(true)
        const res = await request.get(`/api/client/user/vip-permission/invite/page-list?page_size=${20}&page=${1}`);
        setRecords(res.results)
       console.log(records)
        setInviteNum(res.count)
        setPageCount(Math.ceil(res.count / 20))
      } catch (error) {
        console.log(error)
      }
    }
    if (token) {
      fetchRecords()
    }
  }, [token])


//滚动加载触底事件调用的方法
  const getPageList = async() => {
    setSendSourceCode(true)
    try {
      const res = await request.get(`/api/client/user/vip-permission/invite/page-list?page_size=${20}&page=${page}`);
      setRecords([...records, ...res.results])
      setPage(page + 1)
    } catch (error) {
      console.log(error)
    }
  }
  // 列表中的项目 滚动加载数据源dataSource
  const InviteRecord = (
    <List
    split={false}
    dataSource={records}
    renderItem={item => (
      <List.Item key={item.be_invited_user}>
        <div className="invite-record-row">
          <span>{`用户 ${item.phone_num}`}</span>
          <span>{`${item.the_first_login} 首次登录`}</span>
        </div>
      </List.Item>
    )}
  >
  </List>
  )

  // 滚动到底部时增加当前页码
  const handleInfiniteOnLoad = () => {
    if (records.length !== 0) {
      if (page > PageCount) {
       return
      } else {
        getPageList();
      }
    } else if (records.length === 0) {
      message.warning('没有更多记录了！', 2)
    }
  }
 <div className="share-list-content">
          <InfiniteScroll
          initialLoad={false}
          isReverse={false}
          pageStart={0}
          dataLength={records.length}
          next={records}
          loadMore={handleInfiniteOnLoad}
          hasMore={sendSourceCode}
          useWindow={false}
          >
          {InviteRecord}
          </InfiniteScroll>
        </div>