react-admin自定义dataProvider下编辑按钮失效问题排查

核心问题 #

1. 未配置Edit视图路由：你的<Resource>组件只声明了list和create属性，没有指定edit组件，react-admin无法找到对应的编辑页面路由，导致点击EditButton后无法正常跳转。
2. 缺失getOne数据方法：点击EditButton时，react-admin会调用dataProvider的getOne方法获取当前用户的详情数据，你的自定义dataProvider中没有实现这个方法，引发的异常会导致页面行为异常（比如重复调用getList）。
3. update方法的请求参数错误：fetchUtils.fetchJson只接受两个参数（URL和配置对象），你错误地传递了三个参数，导致PUT请求配置失效。

解决方案 #

1. 创建并配置Edit组件

首先创建用户编辑组件UserEdit.jsx：

import { Edit, SimpleForm, TextInput } from 'react-admin';

const UserEdit = (props) => {
  return (
    <Edit {...props}>
      <SimpleForm>
        <TextInput disabled source="id" />
        <TextInput source="name" />
        <TextInput source="email" />
        <TextInput source="company.bs" label="Department" />
      </SimpleForm>
    </Edit>
  );
};

export default UserEdit;

然后在UsersManagement中给<Resource>添加edit属性：

import { dataProvider } from '../helpers/usersDataProvider'
import UserCreate from './UserCreate'
import UserEdit from './UserEdit' // 导入编辑组件

const UsersManagement = () => {
  return (
    <Admin dataProvider={dataProvider}>
        <Resource name='users' list={UserList} create={UserCreate} edit={UserEdit}/>
    </Admin>
  )
}

2. 完善dataProvider的方法

• 添加getOne方法，用于获取单条用户数据：

const API_URL = "https://jsonplaceholder.typicode.com";

export const dataProvider = {
  getList: async (resource, params) => {
    // 保留你原来的getList实现，示例如下
    const response = await fetchUtils.fetchJson(`${API_URL}/${resource}`);
    return {
      data: response.json,
      total: response.json.length,
    };
  },
  // 添加getOne方法
  getOne: async (resource, params) => {
    const response = await fetchUtils.fetchJson(`${API_URL}/${resource}/${params.id}`);
    return { data: response.json };
  },
  // 修复update方法的参数格式
  update: async (resource, params) => {
    const response = await fetchUtils.fetchJson(
      `${API_URL}/${resource}/${params.id}`,
      {
        method: "PUT",
        headers: {
          "Content-type": "application/json; charset=UTF-8",
        },
        body: JSON.stringify(params.data),
      }
    );
    return { data: response.json };
  },
  delete: async (resource, params) => {
    const response = await fetchUtils.fetchJson(
      `${API_URL}/${resource}/${params.id}`,
      {
        method: "DELETE",
      }
    );
    return { data: response.json };
  },
};

3. 简化EditButton的配置

EditButton会自动继承List组件传递的basepath属性，无需手动指定，可简化代码：

<EditButton />
<DeleteButton />

完成以上修改后，点击EditButton应该会正常跳转到编辑视图，并正确调用getOne获取数据，编辑完成后调用update保存修改。

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