Node.js mongoose使用react和material ui TablePagination进行分页-单击onChangePage道具后第二页不再呈现

我是一个比较新的反应者，在这个反应组件中，我肯定缺少一些基本的东西。将非常感谢对解决方案的任何指导

我试图在这里实现的功能-在后端实现分页，在前端实现材质UI。因此，每次用户单击下一页图标（向前或向后箭头）时，都会有一个使用axios.get的数据库调用，数据将从mongo中提取并呈现在UI的表中

为了实现这一点，我在React中使用了handleChangePage（）函数，它将调用axios.get函数

问题-从第二页开始，数据不会呈现，但通过console.log，我可以看到（在chrome开发工具中）在单击下一页图标后，数据确实是从后端获取的。但所获取的数据不会在UI中呈现

这是我的渲染组件中的React代码。关键函数是handleChangePage（），每次用户单击下一页图标（下一页图标是Material UITablePagination组件的图标），我都会在这里调用数据库以获取数据

因此，我试图用下面的代码在

this.setState（{page}）

之后停止组件的重新呈现，但没有解决我的问题

  shouldComponentUpdate(nextProps, nextState) {
    if (this.state.page !== nextState.page) {
      return false;
    }
    return true;
  }

下面是我在Express中从mongo数据库获取数据的后端路由代码。开发是我的猫鼬模式的名称

// To GET ALL DevelopmentWorks - max 5 or 10 or 15 at a time (determined by whatever users sets it to be at the front-end MAT-UI)

router.get("/paginate", (req, res, next) => {
  console.log("THE REQ.QUERY FOR PAGINATION IS ", req.query);
  let pageOptions = {
    page: parseInt(req.query.page) || 0,
    limit: parseInt(req.query.rowsperpage) || 5
  };

  if (req.query.page && req.query.rowsperpage) {
    Development.paginate(
      {},
      {
        offset: pageOptions.page * pageOptions.limit,
        limit: pageOptions.limit
      },
      (err, result) => {
        if (err) {
          console.log(err);
          next(err);
        } else {
          res.status(200).json(result.docs);
        }
      }
    );
  }
});

// To GET ALL DevelopmentWorks
router.route("/").get((req, res, next) => {
  Development.find(
    {},
    null,
    {
      sort: { createdAt: -1 }
    },
    (err, docs) => {
      // Development.find({ port: req.body.port._id }, (err, docs) => {
      if (err) {
        return next(err);
      } else {
        res.status(200).json(docs);
      }
    }
  );
});

---

进一步说明-当我没有使用mongoose paginate并加载整个数据（通过对数据库的一次调用获取数据）时，TablePaginaton工作正常。但现在要实现分页，我想在用户每次单击下一页图标时进行一次新的服务器调用。

解决问题后回答我自己的问题。问题是我将要在表中呈现的数据切片了两次。因此，与mongoose paginate集成后，切片工作由后端本身完成，因为mongoose paginate只会将切片数据发送到前端。但我的错误是，在呈现表的过程中，我再次进行了切片（这是在集成Mongoose paginate之前一次性获取整个数据时所需要的）。下面是上述代码的正确部分（即我在return（）中呈现表的位置）

---

这对我来说很有效，我删除了表体中的

.slice（page*rowsPerPage，page*rowsPerPage+rowsPerPage）

，以修复服务器端分页。谢谢！

  shouldComponentUpdate(nextProps, nextState) {
    if (this.state.page !== nextState.page) {
      return false;
    }
    return true;
  }

// To GET ALL DevelopmentWorks - max 5 or 10 or 15 at a time (determined by whatever users sets it to be at the front-end MAT-UI)

router.get("/paginate", (req, res, next) => {
  console.log("THE REQ.QUERY FOR PAGINATION IS ", req.query);
  let pageOptions = {
    page: parseInt(req.query.page) || 0,
    limit: parseInt(req.query.rowsperpage) || 5
  };

  if (req.query.page && req.query.rowsperpage) {
    Development.paginate(
      {},
      {
        offset: pageOptions.page * pageOptions.limit,
        limit: pageOptions.limit
      },
      (err, result) => {
        if (err) {
          console.log(err);
          next(err);
        } else {
          res.status(200).json(result.docs);
        }
      }
    );
  }
});

// To GET ALL DevelopmentWorks
router.route("/").get((req, res, next) => {
  Development.find(
    {},
    null,
    {
      sort: { createdAt: -1 }
    },
    (err, docs) => {
      // Development.find({ port: req.body.port._id }, (err, docs) => {
      if (err) {
        return next(err);
      } else {
        res.status(200).json(docs);
      }
    }
  );
});

<TableBody>
{stableSort(
  allDevelopmentWorks,
  getSorting(order, orderBy)
)
  .map(n => {
    const isSelected = this.isSelected(n._id);
    return (
      <TableRow
        hover
        onClick={event => this.handleClick(event, n._id)}
        role="checkbox"
        aria-checked={isSelected}
        tabIndex={-1}
        key={n._id}
        selected={isSelected}
      >
        <CustomTableCell padding="checkbox">
          <Checkbox checked={isSelected} />
        </CustomTableCell>
        <CustomTableCell
          component="th"
          scope="row"
          padding="none"
        >
          {n.location}
        </CustomTableCell>
        <CustomTableCell align="right">
          {n.work_description}
        </CustomTableCell>
        <CustomTableCell align="right">
          {moment(n.date_of_commencement).format(
            "MMM D, YYYY 12:00:00 "
          )}{" "}
          {`AM`}
        </CustomTableCell>
        <CustomTableCell align="right">
          {moment(n.date_of_completion).format(
            "MMM D, YYYY 12:00:00 "
          )}{" "}
          {`AM`}
        </CustomTableCell>
        <CustomTableCell align="right">
          {n.status_of_work}
        </CustomTableCell>
      </TableRow>
    );
  })}
{emptyRows > 0 && (
  <TableRow style={{ height: 49 * emptyRows }}>
    <CustomTableCell colSpan={6} />
  </TableRow>
)}
</TableBody>

.slice(
          page * rowsPerPage,
          page * rowsPerPage + rowsPerPage
                      )