Admin-on-Rest集成ASP.NET Core API时DeleteButton触发"Incorrect Element"错误排查

我之前在把admin-on-rest和ASP.NET Core API集成时，也碰到过几乎一模一样的问题——删除功能能正常执行，但进入编辑页或者点删除按钮弹确认框时，总会弹出"Incorrect Element"的错误，控制台还没任何报错信息。结合你的情况，大概率是资源ID的字段映射不匹配导致的，毕竟admin-on-rest对资源的唯一标识有严格的约定，咱们一步步来排查解决：

1. 检查API返回的ID字段名称是否符合admin-on-rest的默认约定 #

admin-on-rest默认要求资源的唯一标识符字段是全小写的id，但ASP.NET Core的实体类默认生成的JSON字段是首字母大写的Id（这是.NET的常规风格），这就会导致admin-on-rest无法正确识别资源的唯一性，进而弹出错误。

解决方法：在你的自定义REST客户端（或者数据提供者）里，对API返回的响应做字段转换，把Id映射为id：

• 处理单个资源（比如编辑页调用的GET /api/elements/{id}）：

  async function fetchJson(url, options = {}) {
      const response = await fetch(url, options);
      const responseJson = await response.json();
      // 把.NET风格的Id转成admin-on-rest需要的id
      return { ...responseJson, id: responseJson.Id };
  }
  

• 处理列表资源：

  async function fetchJson(url, options = {}) {
      const response = await fetch(url, options);
      const responseJson = await response.json();
      return {
          data: responseJson.map(item => ({ ...item, id: item.Id }))
      };
  }
  

2. 确认删除操作后的资源刷新逻辑 #

虽然你说删除功能正常，但删除后admin-on-rest会自动尝试刷新列表或者验证已删除的资源，如果此时返回的响应数据里ID字段还是不匹配，也可能触发错误。

解决方法：可以自定义DeleteButton，在删除成功后手动重定向到列表页，跳过系统自动的资源验证步骤：

import { DeleteButton, useRedirect } from 'admin-on-rest';

const CustomDeleteButton = (props) => {
    const redirect = useRedirect();

    const handleDeleteSuccess = () => {
        // 删除成功后直接跳回列表页
        redirect('/elements');
    };

    return <DeleteButton {...props} onSuccess={handleDeleteSuccess} />;
};

3. 检查getOne接口的响应数据 #

编辑视图会调用getOne接口获取单个资源，如果这个接口返回的数据没有正确的id字段，admin-on-rest就会判定当前加载的资源无效，弹出"Incorrect Element"。

解决方法：打开浏览器的开发者工具，查看GET /api/elements/{id}接口的响应JSON，确认经过客户端转换后是否存在id字段。如果没有，就回到第一步的字段转换逻辑里补全。

4. 检查资源配置中的identifier属性 #

如果你在定义Resource组件时手动指定了identifier属性，一定要确保它和实际返回的字段名（转换后的）一致，比如：

// 错误示例：如果转换后是id，却指定了其他字段
<Resource name="elements" identifier="ElementId" list={ElementList} edit={ElementEdit} />

解决方法：要么去掉自定义的identifier，让系统使用默认的id；要么把identifier的值设置为转换后的字段名。

如果以上步骤都试过还是没解决，可以用React DevTools查看编辑/删除视图的组件状态，看看加载的资源对象里是否有正确的id属性，这能帮你快速定位是数据转换的问题还是组件配置的问题。

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