Reactjs 如何在React中将新数据重新加载到表中？

我有一个大问题，我想不起来。我有一个从

MongoDB

获取的用户表，但是加载时间很长，可能会导致超时。因此，我的想法是通过使用LIMIT和SKIP过滤器分割从Mongo检索到的数据，根据需要加载数据

现在我的问题是，我得到了第一组数据，但当我试图加载第二组数据时……我的应用程序崩溃了，因为新数据仍在加载到状态，因此我的数据被视为NULL。如何将新数据放入表中，并在不中断的情况下使用新的用户集进行渲染

下面是我的代码，getNextUsers是在满足条件后应该带回新用户集的东西，但我同样不确定在哪里或如何修复它

const UserTable = ({
  getUsers,
  getNextUsers,
  users: { users, agents, uCount },
  nextUsers,
}) => {
  
  useEffect(() => {
    getUsers();
    // eslint-disable-next-line
  }, []);
 

  const [page, setPage] = useState(0);

  //Filtering
  const [agent, setAgent] = useState('');
  const handleChange = (e) => {
    setAgent(e.target.value);
    setPage(0);
    filterUsers(users);
  };

  let fUsers = [];

  const filterUsers = (users) => {
    if (agent === '') {
      fUsers = users;
    } else {
      fUsers = users.filter(function (selUser) {
        return selUser.agent_id._id === agent;
      });
    }
  };

  if (fUsers.length === 0 && users.length > 0) {
    filterUsers(users);
  }

  const classes = useStyles2();

  const [rowsPerPage, setRowsPerPage] = useState(10);

  const handleChangePage = (event, newPage) => {
    setPage(newPage);
    if (newPage >= fUsers.length % 10) {
      let limit = fUsers.length;
      let skip = fUsers.length + fUsers.length;
      console.log({ skip, limit });
      getNextUsers(limit, skip);
    }
    console.log(newPage);
  };

  const handleChangeRowsPerPage = (event) => {
    setRowsPerPage(parseInt(event.target.value, 10));
    setPage(0);
  };
  const emptyRows =
    rowsPerPage - Math.min(rowsPerPage, fUsers.length - page * rowsPerPage);