react-admin 编辑组件不调用更新功能
react-admin edit component does not call update function
我正在开发一个 react-admin 应用程序并遇到一个问题,当在编辑视图下单击 'Save' 按钮时,我的 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;
我的UserEdit如下:
<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>
我看到这个问题被提出过几次,但没有任何解决方案的详细信息。 link 提到在布局中使用 Notification 组件(我很确定我使用的是默认布局),或禁用撤消(这确实有效但并不理想):https://github.com/marmelab/react-admin/issues/3049
这个link也参考了一个演示项目讨论了类似的问题,但我找不到相关代码:https://github.com/marmelab/react-admin/issues/5082
我在这里错过了什么?
出于某种原因,Edit 上的 undoable
属性导致了问题。将其设置为 false,它将正确调用更新。我不知道为什么,我在一个特殊的端点下使用这个作为“sub-app”,所以可能是由于路由器冲突,太累了找不到。
您应该将 Edit
的 mutationMode
设置为 "pessimistic"
所以你会
<Edit
{...props}
mutationMode="pessimistic"
>
文档在这里:https://marmelab.com/react-admin/CreateEdit.html#mutationmode
我正在开发一个 react-admin 应用程序并遇到一个问题,当在编辑视图下单击 'Save' 按钮时,我的 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;
我的UserEdit如下:
<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>
我看到这个问题被提出过几次,但没有任何解决方案的详细信息。 link 提到在布局中使用 Notification 组件(我很确定我使用的是默认布局),或禁用撤消(这确实有效但并不理想):https://github.com/marmelab/react-admin/issues/3049
这个link也参考了一个演示项目讨论了类似的问题,但我找不到相关代码:https://github.com/marmelab/react-admin/issues/5082
我在这里错过了什么?
出于某种原因,Edit 上的 undoable
属性导致了问题。将其设置为 false,它将正确调用更新。我不知道为什么,我在一个特殊的端点下使用这个作为“sub-app”,所以可能是由于路由器冲突,太累了找不到。
您应该将 Edit
的 mutationMode
设置为 "pessimistic"
所以你会
<Edit
{...props}
mutationMode="pessimistic"
>
文档在这里:https://marmelab.com/react-admin/CreateEdit.html#mutationmode