React如何通过JSON外键关联显示状态名称（Axios+JSON Server）

我试图从本地项目的JSON文件中展示data数据列表，该JSON文件内的data与status存在关联关系。JSON文件内容如下：

{
  "data": [
      {
         "id": 1383,
         "productID": "10002",
         "productName": "Test 2",
         "amount": "1000",
         "customerName" : "abc",
         "status": 1,
         "transactionDate": "2022-08-15 13:14:52",
         "createBy" : "abc",
         "createOn" : "2022-07-10 13:14:52"
      }
  ],
  "status": [
      {
          "id" : 0,
          "name" : "SUCCESS"
      },
      {
          "id" : 1,
          "name" : "FAILED"
      }
  ]
}

我希望展示data列表时，显示status对应的name属性（如FAILED/SUCCESS），而非data中的status数字值（如1）。目前我使用Axios和JSON Server从本地项目获取数据，请问该如何实现？

解决方案 #

1. 获取完整数据 #

通过Axios请求JSON Server接口，拿到包含data和status的完整数据集：

import axios from 'axios';

axios.get('http://localhost:3000/你的数据接口') // 替换为实际的JSON Server接口地址
  .then(res => {
    const { data: transactions, status: statusOptions } = res.data;
    // 执行后续关联逻辑
  })
  .catch(err => console.error('数据请求失败:', err));

2. 构建状态映射表 #

把status数组转换成键值对形式的映射表，方便快速查找状态名称：

const statusMap = statusOptions.reduce((acc, curr) => {
  acc[curr.id] = curr.name;
  return acc;
}, {});
// 转换后得到：{ 0: 'SUCCESS', 1: 'FAILED' }

3. 关联数据与状态名称 #

遍历原始data列表，将每个项的数字status替换为对应的名称：

const formattedTransactions = transactions.map(item => ({
  ...item,
  // 若匹配不到对应状态，显示默认值'UNKNOWN'
  status: statusMap[item.status] || 'UNKNOWN'
}));

4. 渲染展示 #

现在formattedTransactions中的每个项的status字段已经是对应的名称（如"FAILED"），直接用它渲染列表即可。以下是React示例：

return (
  <div className="transaction-list">
    {formattedTransactions.map(trans => (
      <div key={trans.id} className="transaction-item">
        <p>产品：{trans.productName}</p>
        <p>客户：{trans.customerName}</p>
        <p>状态：<span className="status">{trans.status}</span></p>
      </div>
    ))}
  </div>
);

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