按需加载WooCommerce数据并在Syncfusion DataGrid中展示

要实现Syncfusion Grid的按需分页加载，核心是利用Grid的分页事件触发对应页的WooCommerce API请求，同时通过API响应头获取总记录数来同步Grid的分页配置。以下是具体修改方案：

1. 补充状态变量 #

添加当前页码、总记录数和加载状态的状态，用于控制分页逻辑和UI反馈：

const [products, setProducts] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const [totalRecords, setTotalRecords] = useState(0);
const [isLoading, setIsLoading] = useState(false);

2. 修改API请求逻辑 #

WooCommerce API的响应头包含X-WP-Total（总产品数）和X-WP-TotalPages（总页数），需要从响应中提取这些信息同步到Grid：

const fetchProducts = async (page = 1) => {
  setIsLoading(true);
  try {
    const response = await WooCommerce.get("products", {
      per_page: 10, // 每页显示数量，可根据需求调整，上限为100
      page: page
    });
    if (response.status === 200) {
      setProducts(response.data);
      // 从响应头获取总记录数
      const total = response.headers['x-wp-total'];
      setTotalRecords(parseInt(total));
    }
  } catch (error) {
    console.error('加载产品失败:', error);
  } finally {
    setIsLoading(false);
  }
};

3. 绑定Grid的分页事件 #

使用actionComplete事件监听分页切换操作，触发对应页的产品加载：

const handleActionComplete = (args) => {
  // 判断是否为分页操作
  if (args.requestType === 'paging') {
    const newPage = args.currentPage;
    if (newPage !== currentPage) {
      setCurrentPage(newPage);
      fetchProducts(newPage);
    }
  }
};

4. 配置Grid的分页参数 #

设置pageSettings的pageSize和totalRecordsCount，同时绑定加载状态和事件：

<GridComponent
  id='gridcomp'
  dataSource={products}
  allowPaging
  allowSorting
  pageSettings={{ pageSize: 10, totalRecordsCount: totalRecords }}
  actionComplete={handleActionComplete}
  isLoading={isLoading}
>
  {/* 列配置保持不变 */}
  <ColumnsDirective>
    <ColumnDirective field='id' headerText='产品ID' />
    <ColumnDirective field='name' headerText='产品名称' />
    <ColumnDirective field='slug' headerText='别名' />
    <ColumnDirective field='status' headerText='状态' />
    {/* 其他列... */}
  </ColumnsDirective>
  <Inject services={[Resize, Sort, ContextMenu, Filter, Page, ExcelExport, PdfExport]} />
</GridComponent>

5. 初始化加载第一页 #

在useEffect中初始化加载第一页数据：

useEffect(() => {
  fetchProducts(1);
}, []);

完整修改后的代码 #

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

// 初始化WooCommerce API客户端
const WooCommerce = new WooCommerceRestApi({
  url: 'http://example.com',
  consumerKey: 'ck_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
  consumerSecret: 'cs_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
  wpAPI: true,
  version: 'wc/v3' // 建议使用最新版本API，wc/v1已停止维护
});

const WooCommerceProducts = () => {
  const [products, setProducts] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [totalRecords, setTotalRecords] = useState(0);
  const [isLoading, setIsLoading] = useState(false);

  // 加载指定页的产品数据
  const fetchProducts = async (page = 1) => {
    setIsLoading(true);
    try {
      const response = await WooCommerce.get("products", {
        per_page: 10,
        page: page
      });
      if (response.status === 200) {
        setProducts(response.data);
        const total = response.headers['x-wp-total'];
        setTotalRecords(parseInt(total));
      }
    } catch (error) {
      console.error('加载产品失败:', error);
    } finally {
      setIsLoading(false);
    }
  };

  // Grid操作完成事件，处理分页切换
  const handleActionComplete = (args) => {
    if (args.requestType === 'paging') {
      const newPage = args.currentPage;
      if (newPage !== currentPage) {
        setCurrentPage(newPage);
        fetchProducts(newPage);
      }
    }
  };

  // 初始化加载第一页
  useEffect(() => {
    fetchProducts(1);
  }, []);

  return (
    <div className='m-2 md:m-10 p-2 md:p-10 bg-white rounded-3xl'>
      <h2 className="text-xl font-bold mb-4">WooCommerce 产品列表</h2>
      <GridComponent
        id='gridcomp'
        dataSource={products}
        allowPaging
        allowSorting
        pageSettings={{ pageSize: 10, totalRecordsCount: totalRecords }}
        actionComplete={handleActionComplete}
        isLoading={isLoading}
      >
        <ColumnsDirective>
          <ColumnDirective field='id' headerText='产品ID' width='100' />
          <ColumnDirective field='name' headerText='产品名称' width='250' />
          <ColumnDirective field='slug' headerText='别名' width='200' />
          <ColumnDirective field='status' headerText='状态' width='120' />
          {/* 可添加更多列 */}
        </ColumnsDirective>
        <Inject services={[Resize, Sort, ContextMenu, Filter, Page, ExcelExport, PdfExport]} />
      </GridComponent>
    </div>
  )
}

export default WooCommerceProducts

注意事项 #

• 建议将WooCommerce API版本升级到wc/v3，wc/v1已停止维护，功能有限
• per_page的最大取值为100，是WooCommerce API的默认限制
• 可根据需求添加加载状态的UI提示，比如在Grid上方显示加载动画

内容的提问来源于stack exchange，提问作者Aleks Marinič