如何使用React JS结合JSON Server从JSON数组取数并关联运单与司机生成表格

1. 配置JSON Server数据源 #

假设你的JSON数据结构如下（可根据你提供的实际结构调整）：

{
  "waybills": [
    { "id": "WB001", "driverId": "DR001", "goods": "电子产品", "origin": "深圳", "destination": "上海" },
    { "id": "WB002", "driverId": "DR002", "goods": "生鲜食品", "origin": "广州", "destination": "北京" }
  ],
  "drivers": [
    { "id": "DR001", "name": "张三", "phone": "138xxxx1234", "licensePlate": "粤A12345" },
    { "id": "DR002", "name": "李四", "phone": "139xxxx5678", "licensePlate": "京B67890" }
  ]
}

将上述内容保存为db.json文件，启动JSON Server：

npx json-server --watch db.json --port 5000

2. React组件实现数据获取与关联 #

创建React组件，完成数据拉取、关联、表格渲染全流程：

2.1 初始化状态与引入依赖 #

import { useState, useEffect } from 'react';

function WaybillDriverTable() {
  const [waybills, setWaybills] = useState([]);
  const [drivers, setDrivers] = useState([]);
  const [combinedData, setCombinedData] = useState([]);

2.2 从JSON Server拉取数据 #

通过fetch请求获取运单和司机数据集：

useEffect(() => {
  // 获取运单列表
  fetch('http://localhost:5000/waybills')
    .then(res => res.json())
    .then(data => setWaybills(data))
    .catch(err => console.error('运单数据获取失败:', err));

  // 获取司机列表
  fetch('http://localhost:5000/drivers')
    .then(res => res.json())
    .then(data => setDrivers(data))
    .catch(err => console.error('司机数据获取失败:', err));
}, []);

2.3 关联运单与司机信息 #

通过driverId字段匹配运单和对应的司机信息，生成关联后的数据集：

useEffect(() => {
  if (waybills.length && drivers.length) {
    const mergedData = waybills.map(waybill => {
      const matchedDriver = drivers.find(driver => driver.id === waybill.driverId);
      return {
        ...waybill,
        driverName: matchedDriver?.name || '无关联司机',
        driverPhone: matchedDriver?.phone || '-',
        licensePlate: matchedDriver?.licensePlate || '-'
      };
    });
    setCombinedData(mergedData);
  }
}, [waybills, drivers]);

2.4 渲染目标表格 #

根据你提供的表格样式，渲染关联后的结构化数据：

// 处理加载状态
if (combinedData.length === 0) {
  return <div>加载中...</div>;
}

return (
  <div style={{ padding: '20px' }}>
    <h2>运单-司机关联表</h2>
    <table border="1" style={{ width: '100%', borderCollapse: 'collapse' }}>
      <thead>
        <tr>
          <th>运单编号</th>
          <th>货物名称</th>
          <th>出发地</th>
          <th>目的地</th>
          <th>司机姓名</th>
          <th>联系电话</th>
          <th>车牌号</th>
        </tr>
      </thead>
      <tbody>
        {combinedData.map(item => (
          <tr key={item.id}>
            <td>{item.id}</td>
            <td>{item.goods}</td>
            <td>{item.origin}</td>
            <td>{item.destination}</td>
            <td>{item.driverName}</td>
            <td>{item.driverPhone}</td>
            <td>{item.licensePlate}</td>
          </tr>
        ))}
      </tbody>
    </table>
  </div>
);
}

export default WaybillDriverTable;

3. 关键优化点 #

• 跨域处理：如果React运行在默认3000端口，可在package.json中添加"proxy": "http://localhost:5000"，之后请求可简化为fetch('/waybills')
• 异常处理：可扩展加载失败的提示逻辑，提升用户体验
• 列自定义：可根据你的目标表格样式，调整表头和表格内容的字段映射

内容的提问来源于stack exchange，提问作者Abdullah Saeed .