react-admin 相关问题

一个前端框架,用于使用ES6,React和Material Design在REST / GraphQL API之上构建在浏览器中运行的管理应用程序。以前名为admin-on-rest。由marmelab开源和维护。

如何禁用react-admin的自动刷新功能

所以react-admin似乎有一个功能,如果你闲置了一段时间然后回来,它会重新加载数据,大概是为了确保你正在查看最新版本的reco。 ..

回答 3 投票 0

react-admin 在GetOne 之前添加 url-query-parameters

我有一个反应管理应用程序。这里我有一个 组件: 导出 const UserEdit = (props) => { const 值 = useContext(AppContext); 返回 ( 我有一个反应管理应用程序。这里我有一个 <Edit> 组件: export const UserEdit = (props) => { const value = useContext(AppContext); return ( <div className="container-lg px-0 pb-1"> <Edit queryOptions={{ meta: { customerId: value.selectedCustomer.id } }} mutationOptions={{ meta: { customerId: value.selectedCustomer.id } }}> <SimpleForm /*toolbar={<EditToolbar />}*/> <Stack direction="row" spacing={2}> <Stack direction="column"> <TextInput source="id" required disabled /> <TextInput source="first_name" required /> <TextInput source="last_name" required /> <TextInput source="email" type="email" required disabled /> <PreferredLanguageField {...props} /> </Stack> <Stack direction="column"> <FormDataConsumer> {({ formData, ...rest }) => ( <> <BooleanInput source="active_customer_membership.user_access_manager" label="Can manage users" disabled={value.user.id == formData.id} /> <UserRoleInput {...props} disabled={value.user.id == formData.id} /> <UserAccessInput {...props} formData={formData} disabled={value.user.id == formData.id} /> </> )} </FormDataConsumer> </Stack> </Stack> </SimpleForm> </Edit> </div> ); }; 在 Main 中我有一个 dataProvider: const baseDataProvider = restProvider('../../api/user_access_management/v01', fetchUtils.fetchJson); export const dataProvider = withLifecycleCallbacks(baseDataProvider, [ { resource: 'users', beforeGetList: async (params, dataProvider) => { params.filter.customer_id = params.meta.customerId; return params }, afterGetList: async (result, dataProvider) => { // Format the retrieved data to the correct format for react-admin. return { data: result.data.users, total: result.total }; }, beforeGetOne: async (params, dataProvider) => { return params }, afterGetOne: async (result, dataProvider) => { return { data: result.data.user }; }, beforeUpdate: async (params, dataProvider) => { params.data = { user: DataHelper.formUser(params.data, params.meta.customerId) }; return params; }, afterUpdate: async (result, dataProvider) => { return { data: result.data.user }; }, beforeCreate: async (params, dataProvider) => { params.data = { user: DataHelper.formUser(params.data, params.meta.customerId), }; return params; }, afterCreate: async (result, dataProvider) => { return { data: result.data.user }; }, }, ]); 以及App是如何初始化的: const Main = (props) => { const [customer, setCustomer] = useState(props.props.customer); useEffect(() => { setCustomer(props.props.customer); }, [props.props.customer]); const [customers, setCustomers] = useState(props.props.customers); useEffect(() => { setCustomers(props.props.customers); }, [props.props.customers]); const [user, setUser] = useState(props.props.user); useEffect(() => { setUser(props.props.user); }, [props.props.user]); const [selectedCustomer, setSelectedCustomer] = useState(props.props.customers[0]); useEffect(() => { setSelectedCustomer(props.props.customers[0]); }, [props.props.selectedCustomer]); return ( <AppContext.Provider value={{ customer: customer, customers: customers, user: user, selectedCustomer: selectedCustomer, setSelectedCustomer: setSelectedCustomer }}> <Admin dataProvider={dataProvider} layout={CustomLayout}> <Resource name="users" list={<UserList />} edit={<UserEdit />} create={<UserCreate />} /> </Admin> </AppContext.Provider> ); } export default Main; 我现在的问题是,对于 Create / Update,我可以添加 customer_id 作为发送到后端的字段(它们是 POST / PUT 请求)。与 GetList 相同,这里我可以添加 customer_id 作为过滤器:params.filter.customer_id = params.meta.customerId; 但是,我还需要后端的 customer_id 来处理 GetOne 请求。 <Edit> 组件具有 queryOptions={{ meta: { customerId: value.selectedCustomer.id } }},我在 beforeGetOne 回调中看到了这一点。但是,将其添加到过滤器(就像我对 GetList 所做的那样)似乎不起作用。 如何将查询参数添加到 GetOne 请求的 URL 中? restProvider,我假设您从 ra-data-simple-rest 获得,不支持将过滤器传递给 getOne,因为它是非标准的(在大多数实现中,id 就是您获得单条记录)。 您可能需要手动构建 HTTP 请求(使用 fetch)。 或者,您可以将 customerId 作为 自定义 HTTP 标头 传递,但随后您的 API 需要知道如何使用它。 最后,您还可以选择覆盖 dataProvider 的 getOne 实现,让它使用过滤器调用 getList,并仅返回第一个结果。 关于对delete的调用,您需要将自定义的toolbar传递给您的<SimpleForm>,并在其中包含一个自定义的<DeleteButton>,您可以在其上传递mutationOptions。 PS:如果您使用customerId作为构建多租户应用程序的方式,请务必阅读多租户单页应用程序:注意事项以避免最常见的错误.

回答 1 投票 0

使用API响应更新react-admin中的<TextInput />值?

如何更改 React admin 中的 值以获取来自 API 响应的更新值? 这是代码: 如何更改 React admin 中的 <TextInput /> 值以获取来自 API 响应的更新值? 这是代码: <TextInput source="..." label="..." /> 我已经尝试习惯 setValue 和 getValues 钩子上的 useForm 。但这不起作用。 [电子邮件受保护] 现在使用 react-hook-form。所以你可以使用 useFormContext 来获取 setValue 但只有当你用 FormProvider 包裹表单时它才会生效(在react-admin中,提供程序将类似于 ) const ControlledTextInput = ({ value, ...props }) => { const { setValue } = useFormContext(); React.useEffect(() => { setValue(props.source, value); }, [value]); return <TextInput {...props} />; }; // ========== <SimpleFormConfigurable> <ControlledTextInput source="title" validate={required("Required field")} value="this value was provide by API response" /> </SimpleFormConfigurable>

回答 1 投票 0

如何使用 API 响应更新 React admin 中的 textInput 值?

如何更改 React admin 中的 textInput 值以获取从 API 调用收到的响应的更新? 这是代码: ...

回答 1 投票 0

在getOne之后有没有转换值的解决方案?

需要转换获取的对象,(例如{..., "key": {"keyName": "keyValue"}})需要转换{..., [{"name": "keyName", "值":"

回答 1 投票 0

ra-supabase 如何访问 usePermissions

我正在尝试遵循[文档](https://marmelab.com/react-admin/Permissions.html)以获得仅某些使用supabase的用户可用的资源之一。 然而当我查看

回答 1 投票 0

react-admin 传递 props Main->layout->appBar

我有一个react-admin应用程序来管理用户。现在我需要访问我创建的自定义标头(appBar)中的一些道具,但不知道如何在那里访问这些道具。 这里是一些代码...

回答 1 投票 0

参考字段的可排序选项

我一直在开发一个用户可以订餐的项目。我制作了一个表格,其中显示用户的数据,并且有一列显示该用户已完成的订单数。 我已经

回答 1 投票 0

使用api platform/admin和react-admin生成管理界面时出错

确实,我正在使用api平台使用Symfony开发api。但是,当我想使用 api platform/admin 和 react-admin 生成管理界面时,我在控制台中收到此错误: @api-

回答 1 投票 0

在反应组件之外访问全局存储?

是否可以在react-admin中的react组件之外访问全局存储? 你正在导出你的 redux 商店吗? 就像是 从 'react-admin' 导入 { store };

回答 2 投票 0

嵌套路由不适用于react-admin

我正在尝试这个 我正在尝试这个 <Admin dataProvider={dataProvider} > <Resource name="menuitems" options={{ label: 'Item' }} list={MenuitemList} create{MenuitemCreate} edit={MenuitemEdit} > <Route path=":id/menuitem-subcategories" component={<MenuitemSubcategoryList/>}/> </Resource> </Admin> 但是它给了我错误 [未定义] 不是组件。的所有子组件必须是 a 或 我想使用react-admin进行嵌套路由 正如文档所解释的,react-admin 支持自定义路由和嵌套路由。 在我看来,传递给 <Route> 组件的属性有错误。 component 属性不存在,但 element 属性存在: <Route path=":id/menuitem-subcategories" - component={<MenuitemSubcategoryList />} + element={<MenuitemSubcategoryList />} /> 要实现此目的,请确保从 Route 导入 react-router-dom。

回答 1 投票 0

ra-data-json-server 与 ra-auth-cognito 结合

在开始之前,我对 React 很陌生,但对 AWS 却不太熟悉,这导致我选择了一个超出我能力范围的项目。 我正在构建一个非常简单的 CRUD 网站,其中包含 p...

回答 1 投票 0

React-Admin:选择列表/数据网格项时是否会触发事件?

我正在寻找当选择列表/数据网格项目时显示批量操作工具栏(“xx 项目选择重置视图按钮删除按钮”工具栏)的事件。这是一个 gif-exa...

回答 1 投票 0

在弹出窗口中反应管理员选择输入

我对使用 React Admin 的项目有以下要求。在编辑屏幕中,我想自定义 selectInput 组件,以便它可以不是下拉列表,而是

回答 1 投票 0

react-admin 如果在其他组件而不是 app.js 中则无法工作

我正在尝试将 React-Admin AdminDashboard 组件集成到使用 React-Router 进行导航的更大的 React 应用程序中。但是,我遇到了 AdminDashboard 不支持的问题...

回答 1 投票 0

TabbedForm 未突出显示哪个选项卡有错误

我有一个带有 2 个选项卡的 TabbedForm,每个选项卡都有一个 required() 字段。当我提交此表单并且验证失败时,我希望未聚焦的选项卡指示存在错误并带有

回答 2 投票 0

react-admin 添加覆盖 MuiCssBaseline @global @font-face 的字体不起作用

我正在尝试将 Google 的 NotoSansSC-Regular.otf 添加到 React-admin,以便简体中文的默认字体就是这样。如果我做 CSS 包含

回答 3 投票 0

当我删除项目时,ArrayInput 不会触发 onChange 函数

我添加了一个 onChange 属性。当我添加新元素时它工作得很好,但是如果我删除一个元素,则不会触发该函数。 我添加了一个 onChange 属性。当我添加一个新元素时它工作得很好,但是如果我删除一个元素,该函数就不会触发。 <ArrayInput source="names" label={'Names'} onChange={updateNames} > <SimpleFormIterator className={classes.iteratorFormItem} > <TextInput label="" source="value" validate={maxLength(MAX)} /> </SimpleFormIterator> </ArrayInput> 我不明白为什么当我删除元素时onChange不会触发,因为在这种情况下数组被修改了。 onChange 不是react-admin 的 <ArrayInput> 支持的属性。如果当用户更新子记录时它起作用,那是偶然的。该文档没有提及它(请参阅https://marmelab.com/react-admin/Inputs.html#array-inputs)。 现在,您似乎想在用户更改数据时对其进行处理。为什么不使用 parse 选项呢? (https://marmelab.com/react-admin/Inputs.html#common-input-props)。 创建自定义删除按钮就像预期的那样工作: const handleRemove = () => { console.log('handleRemove'); } <SimpleFormIterator removeButton={ <RemoveItemButtonWithListener listener={handleRemove} /> } > import CloseIcon from '@mui/icons-material/RemoveCircleOutline'; const RemoveItemButtonWithListener = ( props: { listener: () => void } ) => { const { remove } = useSimpleFormIteratorItem(); return ( <IconButtonWithTooltip label="ra.action.remove" size="small" onClick={ () => { remove(); props.listener(); } } color="warning" > <CloseIcon fontSize="small" /> </IconButtonWithTooltip> ); };

回答 2 投票 0

什么原因导致react-admin中出现唯一的key prop警告?

在测试react-admin应用程序时,我不断收到此警告: 警告:列表中的每个子项都应该有一个唯一的“key”道具。 使用 ...

回答 1 投票 0

react-admin 获取标头 X-Total-Count 问题

当从前端使用react-admin调用后端API时,从浏览器控制台收到此错误: 警告:缺少密钥翻译:“HTTP 响应中缺少 X-Total-Count 标头。

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.