React使用antd mobile实现上拉加载和下拉刷新

import React, { useEffect, useState } from "react"
import { PullToRefresh, InfiniteScroll, DotLoading } from 'antd-mobile'
import styles from './index.scss'

const Page = () => {
  const [hasMore, setHasMore] = useState(true)
  const [data, setData] = useState(new Array(30).fill(Math.random()))

  useEffect(() => {
    if (data.length >= 90) {
      setHasMore(false)
    }else {
      setHasMore(true)
    }
  }, [data])

  const handleRefresh = async () => {
    await new Promise((res) => {
      setTimeout(() => {
        res('')
      }, 1500)
    })
    setData(new Array(30).fill(Math.random()))
  }

  const loadMore = async () => {
    await new Promise((res) => {
      setTimeout(() => {
        res('')
      }, 1500)
    })
    setData(data => data.concat(new Array(30).fill(Math.random())))
  }

  return (
    <div className={styles.page}>
      <PullToRefresh
        onRefresh={handleRefresh}
      >
        {data.map((item) => {
          return (
            <div>
              {item}
            </div>
          )
        })}
      </PullToRefresh>

      <InfiniteScroll hasMore={hasMore} loadMore={loadMore} threshold={1}>
        {hasMore ? (
          <>
            <span>Loading</span>
            <DotLoading />
          </>
        ) : (
          <span>--- 我是有底线的 ---</span>
        )}
      </InfiniteScroll>
    </div>
  )
}

export default Page