React中如何将JSON响应转为Datatable行数据并添加跳转

1. 先确认表头Columns的结构 #

假设你已经定义好包含6个数据列+1个操作列的表头，示例如下：

const columns = [
  { key: 'trademarkName', label: '商标名称' },
  { key: 'registrationNumber', label: '注册号' },
  { key: 'applicant', label: '申请人' },
  { key: 'registrationDate', label: '注册日期' },
  { key: 'validityPeriod', label: '有效期' },
  { key: 'category', label: '类别' },
  { key: 'actions', label: '操作' } // 新增的操作列
];

2. 转换接口返回的原始数据 #

拿到后端返回的JSON数组后，直接用map遍历，提取你需要的6个字段，同时给每行生成跳转按钮的内容。

示例代码（React环境下）：

// 假设接口返回的原始数据存在response.data里
const rawData = response.data;

// 转换成DataTable需要的rows数组
const rows = rawData.map(item => ({
  // 这里的key要和columns里的key完全对应，字段值从原始数据里取
  trademarkName: item.trademark_name, // 替换成你接口实际返回的字段名
  registrationNumber: item.reg_number,
  applicant: item.applicant_name,
  registrationDate: item.reg_date,
  validityPeriod: `${item.start_date} - ${item.end_date}`, // 可以按需格式化
  category: item.category,
  // 生成操作按钮，点击跳转到详情页
  actions: (
    <button 
      onClick={() => window.location.href = `/trademark/detail/${item.id}`}
      type="button"
    >
      查看详情
    </button>
  )
}));

3. 完整组件示例 #

把请求、转换、渲染的流程整合起来：

import { useEffect, useState } from 'react';
import DataTable from './DataTable'; // 导入你的DataTable组件

// 预先定义好表头
const columns = [
  { key: 'trademarkName', label: '商标名称' },
  { key: 'registrationNumber', label: '注册号' },
  { key: 'applicant', label: '申请人' },
  { key: 'registrationDate', label: '注册日期' },
  { key: 'validityPeriod', label: '有效期' },
  { key: 'category', label: '类别' },
  { key: 'actions', label: '操作' }
];

const TrademarkTable = () => {
  const [rows, setRows] = useState([]);

  useEffect(() => {
    // 调用后端接口
    fetch('/api/trademarks')
      .then(res => res.json())
      .then(rawData => {
        // 转换数据格式
        const transformedRows = rawData.map(item => ({
          trademarkName: item.trademark_name,
          registrationNumber: item.reg_number,
          applicant: item.applicant_name,
          // 格式化日期，让显示更友好
          registrationDate: new Date(item.reg_date).toLocaleDateString(),
          validityPeriod: `${new Date(item.start_date).toLocaleDateString()} - ${new Date(item.end_date).toLocaleDateString()}`,
          category: item.category,
          // 如果用React Router，换成Link组件更合适
          actions: (
            <button 
              onClick={() => window.location.href = `/trademark/detail/${item.id}`}
              className="btn btn-primary"
            >
              查看详情
            </button>
          )
        }));
        setRows(transformedRows);
      })
      .catch(err => console.error('数据加载失败:', err));
  }, []);

  // 把columns和rows传给DataTable组件
  return <DataTable columns={columns} rows={rows} />;
};

export default TrademarkTable;

关键注意点 #

• 字段匹配：map里的每个key必须和columns中的key完全一致，否则DataTable无法正确渲染对应列。
• 跳转方式：如果是单页应用，推荐用React Router的<Link to={/trademark/detail/${item.id}}>查看详情</Link>替代原生跳转，避免页面刷新。
• 数据格式化：日期、有效期这类字段，可以根据需求用日期工具函数（比如dayjs）格式化后再返回，提升可读性。

内容的提问来源于stack exchange，提问作者Georgios Kompos