在Admin On Rest表格中展示嵌套JSON对象

我来帮你搞定这个需求～首先得先明确你的数据结构，我先假设你用JSON Server模拟的user和workflow对象大概是这样的（如果和实际结构有出入，你可以对应调整代码）：

示例数据结构（db.json） #

{
  "users": [
    { "id": 1, "firstNames": "John", "lastNames": "Doe", "workflowId": 101 },
    { "id": 2, "firstNames": "Jane", "lastNames": "Smith", "workflowId": 102 }
  ],
  "workflows": [
    {
      "id": 101,
      "tasks": [
        { "name": "用户注册审核" },
        { "name": "用户资料归档" }
      ]
    },
    {
      "id": 102,
      "tasks": [
        { "name": "权限分配" },
        { "name": "账户激活" }
      ]
    }
  ]
}

核心问题是：ReferenceField会关联到对应的workflow对象，但默认没有组件能直接渲染数组类型的tasks列表，所以我们需要自定义一个组件来处理这个数组。

步骤1：创建自定义任务列表组件 #

先写一个专门用来渲染workflow任务名称的组件，接收record参数（也就是关联到的workflow对象），然后遍历tasks数组展示：

import React from 'react';

// 自定义组件：渲染任务名称列表
const TaskList = ({ record }) => {
  // 如果没有关联的workflow或者tasks为空，显示占位符
  if (!record || !record.tasks || record.tasks.length === 0) {
    return <span>无任务</span>;
  }
  
  return (
    <ul style={{ margin: 0, paddingLeft: '1.5em', listStyleType: 'circle' }}>
      {record.tasks.map((task, index) => (
        <li key={index}>{task.name}</li>
      ))}
    </ul>
  );
};

export default TaskList;

步骤2：在User列表中使用ReferenceField + 自定义组件 #

接下来在你的User列表组件里，用ReferenceField关联到workflows资源，然后把自定义的TaskList作为子组件传入，这样就能展示对应的任务列表了：

import React from 'react';
import { List, Datagrid, TextField, ReferenceField } from 'admin-on-rest';
import TaskList from './TaskList'; // 引入刚才的自定义组件

const UserList = (props) => (
  <List {...props}>
    <Datagrid rowClick="edit">
      <TextField source="id" label="User ID" />
      <TextField source="firstNames" label="First Name" />
      <TextField source="lastNames" label="Last Name" />
      {/* 关联workflows资源，用自定义组件渲染任务 */}
      <ReferenceField 
        source="workflowId"  // user对象中关联workflow的字段
        reference="workflows" // JSON Server中的workflow资源名称（复数）
        label="Assigned Tasks"
      >
        <TaskList />
      </ReferenceField>
    </Datagrid>
  </List>
);

export default UserList;

特殊情况：一个用户关联多个Workflow #

如果你的user对象是关联多个workflow（比如有workflowIds: [101, 102]这样的数组字段），那你需要用ReferenceArrayField来替代ReferenceField，同时调整自定义组件来合并所有关联workflow的任务：

import { ReferenceArrayField } from 'admin-on-rest';

// 调整后的自定义组件：处理多个workflow的任务
const MultiWorkflowTaskList = ({ records }) => {
  if (!records || records.length === 0) return <span>无任务</span>;
  
  // 合并所有workflow的tasks
  const allTasks = records.flatMap(workflow => workflow.tasks || []);
  
  return (
    <ul style={{ margin: 0, paddingLeft: '1.5em' }}>
      {allTasks.map((task, index) => (
        <li key={index}>{task.name}</li>
      ))}
    </ul>
  );
};

// 在列表中使用
<ReferenceArrayField 
  source="workflowIds" 
  reference="workflows" 
  label="All Tasks"
>
  <MultiWorkflowTaskList />
</ReferenceArrayField>

注意事项 #

• 确保你的admin-on-rest dataProvider配置正确，比如用jsonServerProvider('http://localhost:3000')，并且资源名称和db.json里的一致（比如workflows是复数）。
• 如果你的workflow对象中tasks的字段名不是name，记得修改自定义组件里的task.name为实际字段名。

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