React Admin如何在自定义字段中解析URL？

你的代码问题出在useGetOne的用法上，这个钩子需要传入资源名称和资源ID，而非直接传完整API URL。以下是修正后的实现步骤与代码：

问题分析 #

1. useGetOne的正确参数格式是{ resource: string, id: any }，你直接传入URL会导致React Admin无法正确发起请求。
2. 需从unity字段的URL中提取Unity资源的ID，再用该ID调用useGetOne获取详情。
3. 未处理异步请求的加载、错误状态，直接渲染unity对象会显示[object Object]这类无效内容。

修正后的代码 #

import * as React from "react";
import { useRecordContext, useGetOne, Loading, Error } from 'react-admin';

const UnityField = ({ source, displayField = 'name' }) => {
    const record = useRecordContext();
    
    if (!record || !record[source]) return null;

    // 从URL中提取Unity的ID：分割URL取倒数第二个非空项（兼容URL末尾带/或不带/的情况）
    const unityUrl = record[source];
    const unityId = unityUrl.split('/').filter(Boolean).pop();

    // 调用useGetOne获取Unity详情，resource对应DRF路由中的资源名（此处为'unity'）
    const { data: unity, loading, error } = useGetOne({
        resource: 'unity',
        id: unityId,
    });

    if (loading) return <Loading />;
    if (error) return <Error />;

    // 渲染Unity的指定字段（如name），并链接到原URL
    return unity ? (
        <a href={unityUrl} target="_blank" rel="noopener noreferrer">
            {unity[displayField]}
        </a>
    ) : null;
}

export default UnityField;

使用说明 #

1. ID提取逻辑：split('/').filter(Boolean).pop()能稳定提取URL中的资源ID，不受末尾斜杠影响。
2. 资源名称匹配：resource: 'unity'需与DRF路由中定义的资源名一致（即对应/api/v1/unity/的资源前缀）。
3. 自定义显示字段：默认显示name字段，可根据Unity模型的实际字段调整，比如传入displayField="code"显示编码。
4. 状态处理：添加了加载、错误状态的UI反馈，提升用户体验。

额外优化建议 #

如果你的DRF后端支持嵌套序列化，可直接在Truck的序列化器中包含Unity的相关字段，无需额外发起请求，性能更优。示例如下：

# serializers.py
class TruckSerializer(serializers.ModelSerializer):
    unity = UnitySerializer(read_only=True)  # 嵌套Unity序列化器

    class Meta:
        model = Truck
        fields = ['id', 'unity', 'license_plate', ...]

此时前端拿到的unity字段是完整对象，无需调用useGetOne，直接渲染record.unity.name即可。

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