react-admin编辑组件不调用更新功能

Question

我正在开发一个react-admin应用程序，并且遇到一个问题，当在编辑视图下单击“保存”按钮时，不会调用我的dataProvider中的

update

函数。

我的 App.js 看起来像这样：

import React, { useEffect } from 'react';
import { Switch, Route, Redirect, useLocation } from 'react-router-dom';
import { setGlobal, getGlobal } from 'reactn';
import ReactGA from 'react-ga';
import PrivateRoute from './Auth/PrivateRoute';
import UserLayout from './components/user/layout/Layout';
import AuthLayout from './components/auth/Layout';
import defaultGlobalState from './defaultGlobalState';
import portalApiDataProvider from "./providers/portalApiDataProvider";
import {Admin, ListGuesser, EditGuesser, ShowGuesser, Resource, Layout} from "react-admin";
import { UserList, UserEdit, UserShow } from '../src/components/admin/users';
import { AccountList } from "./components/admin/serviceAccounts";
import authProvider from "./providers/authProvider";

ReactGA.initialize(process.env.REACT_APP_GA_KEY);

const jwt = JSON.parse(localStorage.getItem('jwt'));

setGlobal({ ...defaultGlobalState, jwt });

const App = () => {
  const { userId } = getGlobal();

  let location = useLocation();
  useEffect(() => {
    ReactGA.pageview(location.pathname + location.search);
  }, [location]);

  return (
      <Admin dataProvider={portalApiDataProvider} authProvider={authProvider}>
          <Resource name="users" options={{label: 'Customer Profiles'}} list={UserList} show={UserShow} edit={UserEdit}/>
          <Resource name="serviceAccounts" list={AccountList}/>
      </Admin>
  );
};

export default App;

我的用户编辑如下：

<Edit title={<UserTitle/>} {...props}>
    <SimpleForm>
        <TextInput source="first_name" />
        <TextInput source="last_name" />
        <TextInput source="email" />
        <TextInput source="phone" />
        <TextInput source="default_account_number" />
        <BooleanInput source="validated" format={v => v === 1 ? true : false}/>
    </SimpleForm>
</Edit>

我已经多次看到这个问题被提出，但没有任何解决方案的详细信息。 此链接提到在布局中使用通知组件（我很确定我正在使用默认布局），或禁用撤消（这确实有效，但并不理想）：https://github.com/marmelab/react -管理/问题/3049

此链接还参考演示项目讨论了类似的问题，但我找不到相关代码：https://github.com/marmelab/react-admin/issues/5082

我在这里缺少什么？

Answer 1

由于某种原因，编辑上的

undoable

道具导致了问题。将其设置为 false，它将正确调用更新。我不知道为什么，我在特殊端点下使用它作为“子应用程序”，所以可能是由于路由器冲突，太累了，找不到。

Answer 2

问题

当您尝试在

mutationMode="undoable"

 props 

mutationOptions

 函数中重定向时，默认的 

onSuccess

会导致错误。

这是因为

onSuccess

函数被触发，并且在底层突变实际完成之前发生重定向，即用户在调用任何突变之前被重定向。

解决方法

因此，解决方法是确保仅在突变完成后调用

onSuccess

 函数。这可以通过 

mutationMode="pessimistic" 来完成，因为它将等待突变实际上

完成。

这种行为在反应管理文档中没有得到很好的记录 - 至少我找不到任何东西 - 事实上，文档专门显示了 onSuccess

函数中重定向的

示例，但没有提及此行为。

文档

特别提到：“请注意，如果设置了mutationOptions属性，则重定向属性将被忽略。请参阅该属性以了解在这种情况下如何设置不同的重定向路径。”

解决方案

我的建议是 - 如果您需要在成功编辑或创建记录时进行重定向，只需使用 redirect

属性

。

您应该将

mutationMode

Answer 3

Edit

设置为

"pessimistic"

所以你会的

 <Edit
      {...props}
      mutationMode="pessimistic"
>

此处的文档：

https://marmelab.com/react-admin/Edit.html#mutationoptions