在滚动期间，更新状态并刷新ReactJS中的组件

我是新手，我尝试在滚动结束时附加一个额外的卡片标签htmls

我所做的是捕获事件“Onscroll End”，并尝试在React state accounts中的滚动末尾添加额外数据

所有工作正常，状态已更新，但未在DOM中呈现

代码：

//reactstrap组件
从“react”导入{useState}
进口{
徽章，
卡片
万向节，
卡片页脚，
名片夹，
名片，
上校，
输入，
FormGroup，
形式，
标页码
分页主义，
分页链接，
桌子
集装箱，
一行
不受控制的下降，
下拉开关，
下拉项，
下拉菜单，
按钮
不受控制的工具提示，
}从“反应带”；
从“axios”导入axios；
从“React”导入React；
从“react router dom”导入{Link}；
var apitoken=localStorage.getItem（'apitoken'）；
const api=axios.create（{baseURL:“https://api/v1/account"})
常量选项={
标头：{'Authorization'：apitoken}
}
var accountarry=[]；
常量帐户=（）=>{
const[accounts，setaccount]=React.useState（[]）；
常量[loading，setLoading]=React.useState（true）；
const[disabled，setDisabled]=使用状态（false）；
const[selectedStudent，setSelectedStudent]=useState（{}）；
React.useffect（异步（）=>{
const response=wait api.get（“/”，选项）；
accountarry=response.data.response
设置帐户（accountarry）；
设置加载（假）；
}, []); 
常量handleScroll=e=>{
设元素=e.target
if（element.scrollHeight-element.scrollTop===element.clientHeight）{
//在卷轴的末尾做些什么
控制台日志（“结束”）
accountarry.push（{“name”：“arrayvalue”}）
}}
const Handlestudentclick=（学生）=>{
SETSELECTED学生（学生）
}
如果（装载）{
返回装载。。。；
}
返回(
{/*页面内容*/}
查看帐户
{accounts.map（（学生，索引）=>{
const{id，name，phone，email}=student//解构
返回(
Handlestudentclick（学生）}>
{name}
{电话}
{email}
)
})}
)
}
常量显示=（）=>{
返回(
);
};
导出默认显示；

我不知道这个方法是对还是错

请建议将以下文件存档：

在滚动的末尾添加额外的数据以显示

提前谢谢

// reactstrap components
import {useState} from "react"
import {
  Badge,
  Card,
  CardHeader,
  CardFooter,
  CardBody,
  CardTitle,
  Col,
  Input,
  FormGroup,
  Form,
  Pagination,
  PaginationItem,
  PaginationLink,
  Table,
  Container,
  Row,
  UncontrolledDropdown,
  DropdownToggle,
  DropdownItem,
  DropdownMenu,
  Button,
  UncontrolledTooltip,
} from "reactstrap";
import axios from "axios";

import React from "react";
import { Link } from "react-router-dom";
var apitoken= localStorage.getItem('apitoken');
const api=axios.create({baseURL:"https://api/v1/account"})
const options = {
  headers: {'Authorization': apitoken}
}


var accountarry=[];

const Accounts = () => {

 
  const [accounts, setaccount] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [disabled, setDisabled] = useState(false);
  const [selectedStudent, setSelectedStudent] = useState({});
  
  React.useEffect(async () => {
    const response = await api.get("/",options);
    accountarry=response.data.response
    setaccount(accountarry);
    setLoading(false);
  }, []); 
  const handleScroll = e => {
    let element = e.target
    if (element.scrollHeight - element.scrollTop === element.clientHeight) {
      // do something at end of scroll
      console.log("End")
      accountarry.push({"name":"arrayvalue"})
    }}
 
   const Handlestudentclick = (student) => {
    setSelectedStudent(student)
 
  }

  if (loading) {
    
    return <>Loading...</>;
  }
  
  return (
    <>
     <Header />
  {/* Page content */}
  <Container className="mt--7" fluid>
    
    <Row>
    <Col className="order-xl-1 " xl="2">
    <CardHeader className="bg-white border-0">
              <Row className="align-items-center">
                <Col xs="8">
       
        <Link to="/admin//accounts" className="ni ni-bold-left">

              <span> View Account</span></Link>
                </Col>
     
     </Row>
     
     </CardHeader>
     
    <Card className="bg-secondary shadow navbar-nav-scroll" onScroll={handleScroll}>
      {accounts.map((student, index) => {
        
        const { id, name, phone, email } = student //destructuring
        return (
          <>
          <div style={{ width: "16rem" }} onClick={() => Handlestudentclick(student)}>
          <Card className="card-stats mb-4 mb-lg-2" style={{ cursor: 'pointer' }}>
          
            <CardBody>

              <Row>
                <div className="col">
                  <CardTitle className="h4 font-weight-bold mb-0">
                    {name}
                  </CardTitle>
                  <span className="h5">{phone}</span>
                  
                </div>
                <div  className="col">
                <span className="h5">{email}</span>
                </div>
              
              </Row>
            
            </CardBody>
          </Card>
          
        </div>
      </>
        )
      })}

</Card>
      </Col>
      <Col className="order-xl-1" xl="10">
    <Card className="bg-secondary shadow">
    <Navbar/>
          
              <Row >

              <Col className="shadow navbar-nav-scroll">
     


    </Col>
      
   
     </Row>
    
     </Card>
      </Col>
    </Row>
   
  </Container>
      
    </>
  )
}


const Display = () => {
 return (
  <>

 
      
           
     <Accounts/>
     
</>
  );
};

export default Display;