我需要用WooCommerce Rest API加载我的nodeJS应用程序中的所有产品。我使用WooCommerce REST API - JavaScript Library和Syncfusion Grid Component。因为我不能一次加载所有数据，我想使用this这样的 * 按需加载数据 *，但我找不到任何文档或示例。
我有这样的东西：

import React from 'react';
import { useEffect, useState } from "react";
import { GridComponent, ColumnsDirective, ColumnDirective, Resize, Sort, ContextMenu, Filter, Page, ExcelExport, PdfExport, Edit, Inject } from '@syncfusion/ej2-react-grids';
import WooCommerceRestApi from "@woocommerce/woocommerce-rest-api";

var WooCommerce = new WooCommerceAPI({
  url: 'http://example.com',
  consumerKey: 'ck_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
  consumerSecret: 'cs_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
  wpAPI: true,
  version: 'wc/v1'
});

const WooCommerceProducts = () => {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetchOrders();
  }, []);

  let fetchOrders = () => {
    WooCommerce
      .get("products", {
        per_page: 100,
        page: 1
      })
      .then((response) => {
        if (response.status === 200) {
          setProducts(response.data);
        }
      })
      .catch((error) => { });
  };

  return (
    <div className='m-2 md:m-10 p-2 md:p-10 bg-white rounded-3xl'>
      <Header category="Page" title="WooCommerce Orders" />
      <GridComponent
        id='gridcomp'
        dataSource={orders}
        allowPaging
        allowSorting>
        <ColumnsDirective>
          <ColumnDirective field='id' />
          <ColumnDirective field='name' />
          <ColumnDirective field='slug' />
          <ColumnDirective field='status' />

          ...

        </ColumnsDirective>
        <Inject services={[Resize, Sort, ContextMenu, Filter, Page, ExcelExport, PdfExport]} />
      </GridComponent>
    </div>
  )
}

export default WooCommerceProducts

请帮帮忙谢谢