如何阻止React Admin的Edit表单显示Create阶段设置的值

针对你遇到的问题——从Create页面跳转至Edit页面后，密码输入框仍保留创建时的值，而API并未返回密码字段，以下是几种可行的解决方法：

1. 自定义数据获取，强制忽略缓存 #

React Admin默认会缓存数据，导致跳转后复用了Create阶段的表单值。你可以在Edit组件中手动调用useGetOne并禁用缓存，确保每次都从API拉取最新数据：

import { Edit, SimpleForm, TextInput, useGetOne } from 'react-admin';
import { useParams } from 'react-router-dom';

const UserEdit = () => {
  const { id } = useParams();
  // 设置cacheTime和staleTime为0，禁用缓存
  const { data, isLoading } = useGetOne('users', { 
    id, 
    options: { cacheTime: 0, staleTime: 0 } 
  });

  if (isLoading) return <div>加载中...</div>;

  return (
    <Edit data={data}>
      <SimpleForm initialValues={data}>
        <TextInput source="username" />
        {/* API不返回密码，强制初始值为空 */}
        <TextInput source="password" initialValue="" />
      </SimpleForm>
    </Edit>
  );
};

2. 提交后清空Create页面的表单缓存 #

在Create组件提交成功后，调用useResetStore清除全局缓存，避免跳转时携带旧的表单数据：

import { Create, SimpleForm, TextInput, useCreate, useResetStore, useRedirect, useNotify } from 'react-admin';

const UserCreate = () => {
  const [create] = useCreate();
  const redirect = useRedirect();
  const notify = useNotify();
  const resetStore = useResetStore();

  const handleSubmit = async (values) => {
    try {
      const { data } = await create('users', { data: values });
      notify('用户创建成功');
      // 清空缓存，避免旧数据带到Edit页面
      resetStore();
      redirect(`/users/${data.id}`);
    } catch (error) {
      notify('创建失败', { type: 'error' });
    }
  };

  return (
    <Create onSubmit={handleSubmit}>
      <SimpleForm>
        <TextInput source="username" />
        <TextInput source="password" />
      </SimpleForm>
    </Create>
  );
};

3. 自定义DataProvider，过滤无关字段 #

在全局DataProvider中，针对用户资源的getOne方法过滤掉password字段，确保返回给Edit组件的数据中永远不包含该字段：

// 自定义DataProvider
const customDataProvider = {
  ...originalDataProvider, // 传入你原本的dataProvider
  getOne: async (resource, params) => {
    const response = await originalDataProvider.getOne(resource, params);
    // 针对用户资源，删除password字段
    if (resource === 'users' && response.data) {
      delete response.data.password;
    }
    return response;
  }
};

// 在Admin组件中使用
const App = () => (
  <Admin dataProvider={customDataProvider}>
    {/* 资源配置 */}
  </Admin>
);

4. 确保mutationMode全局生效 #

虽然你已经给Edit组件设置了mutationMode="pessimistic"，建议同时给Create组件也配置该属性，确保创建操作完全完成并从API同步数据后再跳转：

// Create组件添加mutationMode
<Create mutationMode="pessimistic">
  <SimpleForm>
    {/* 表单字段 */}
  </SimpleForm>
</Create>

// Edit组件保持配置
<Edit mutationMode="pessimistic">
  <SimpleForm>
    {/* 表单字段 */}
  </SimpleForm>
</Edit>

这些方法可以单独或组合使用，核心思路是切断Create页面的旧数据与Edit页面的关联，确保Edit表单始终以API返回的内容为唯一数据源。

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