react 电话本列表、触底加载

app.js

import React, {useState } from 'react';
import {InfiniteScroll,List} from "antd-mobile"

export default function App(){
  const [data,setData]=useState(["A","B","C","D","E","F","G",
"H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W",
"X","Y","Z"])
  const [hasMore,setHasMore]=useState(true)
  const loadMore=()=>{
    const append=[1,2,3,4,5,6,7,8,9,10]
    if(data.length>=100){
      setHasMore(false)
    }else{
      setData(val=>[...val,...append])
      setHasMore(true)
    }
  }
  return(
    <div className='App'>
      <List>
        {data.map((item,index)=>(
          <List.Item key={index}>{item}</List.Item>
        ))}
      </List>
      <InfiniteScroll loadMore={loadMore} hasMore={hasMore}/>
    </div>
  )
}

app.css

*{
  margin: 0;
  padding: 0;
}
#root{
  height: 100vh;
}
#root>.App{
  height: 100vh;
}