react-admin编辑页如何等待内部API响应后再结束编辑流程？

核心逻辑：react-admin 默认会在提交请求 resolve 后触发页面跳转，请求 reject 时停留在当前页并抛出错误，你只要将内部API的调用逻辑嵌入到提交的生命周期中，控制请求的resolve/reject时机即可实现需求，以下是三种可落地的方案：

方案1：自定义dataProvider（最推荐，侵入性最低） #

直接修改dataProvider的对应方法，把内部API的调用逻辑封装在update/create等操作中，react-admin会自动等待所有逻辑执行完成再判断是否跳转：

• 内部API调用成功后再resolve请求，触发自动跳转
• 内部API调用失败直接reject，页面会停留在编辑页，同时自动展示错误提示

示例代码：

import jsonServerProvider from 'ra-data-json-server';

// 初始化默认的dataProvider
const baseProvider = jsonServerProvider('https://你的默认服务端地址');

const customDataProvider = {
  ...baseProvider,
  // 覆盖编辑更新逻辑
  update: async (resource, params) => {
    // 先调用内部更新API
    const internalRes = await fetch('/你的内部API地址', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(params.data)
    });
    if (!internalRes.ok) {
      // 内部API失败直接抛出错误，阻止跳转
      throw new Error('内部更新失败，请检查参数后重试');
    }
    // 内部API成功后，执行原有的react-admin更新逻辑（不需要的话也可以直接返回符合格式的响应数据）
    return baseProvider.update(resource, params);
  },
  // 如果是创建页的需求，同理覆盖create方法即可
  create: async (resource, params) => {
    // 同上封装内部API逻辑
  }
};

把自定义的customDataProvider传给<Admin>组件即可全局生效。

方案2：自定义编辑页提交回调，手动控制跳转逻辑 #

如果你不想全局修改dataProvider，可以单独给对应编辑页配置mutationOptions，覆盖默认的成功跳转逻辑，等内部API返回后再手动触发跳转：

示例代码：

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

const 你的编辑页组件 = () => {
  const notify = useNotify();
  const redirect = useRedirect();

  return (
    <Edit 
      mutationOptions={{
        onSuccess: async (result) => {
          try {
            // 调用内部API
            const internalRes = await fetch('/你的内部API地址', {
              method: 'POST',
              body: JSON.stringify(result)
            });
            if (!internalRes.ok) throw new Error('更新失败');
            // 内部API成功后手动触发跳转
            notify('更新成功', { type: 'success' });
            redirect('list', '对应的资源名');
          } catch (err) {
            // 失败仅提示，不跳转
            notify(err.message, { type: 'error' });
          }
        },
        // 可选：默认请求失败时也停留在当前页
        onError: (err) => {
          notify(err.message, { type: 'error' });
        }
      }}
    >
      <SimpleForm>
        {/* 你的表单项 */}
        <TextInput source="title" label="标题" />
      </SimpleForm>
    </Edit>
  );
};

方案3：新增路由拦截，防止提交过程中用户主动离开 #

如果需要避免用户在API请求过程中点浏览器返回、侧边栏导航等操作离开页面，可以搭配路由拦截能力实现强制停留：
react-admin v4基于react-router v6，可以直接用usePrompt hook实现拦截：

示例代码：

import { usePrompt } from 'react-router-dom';
import { Edit, useEditContext } from 'react-admin';

const 你的编辑页组件 = () => {
  // 获取提交状态，isPending为true时代表提交中
  const { isPending } = useEditContext();
  // 提交过程中拦截所有导航操作
  usePrompt('更新操作尚未完成，确定要离开吗？', isPending);

  return (
    <Edit>
      {/* 表单内容 */}
    </Edit>
  );
};

注意事项 #

• 自行封装请求逻辑时，错误抛出要符合react-admin的格式要求，避免表单的submitting状态卡住，导致用户无法重复提交
• 可以在提交过程中禁用保存按钮，避免用户重复触发请求
• 错误提示要明确，避免用户误以为页面卡死

内容的提问来源于stack exchange，提问作者e-j5