时间戳

首页 > 解决方案 > 共享相同资源的两个列表上的 React-admin 分隔过滤器

javascript - 共享相同资源的两个列表上的 React-admin 分隔过滤器

问题描述

我正在寻找一个简单问题的解决方案。为了保持一致性，React-Admin 框架在 redux 中提供了一个“缓存”，以在特定资源的每个路由上保留过滤器。

案例： 我有一个资源页面“用户”。我有另一个实体的另一个页面，可以说“组”。要将用户添加到此组，我有一个按钮，可以打开一个（对话框），显示整个用户列表并希望可以免费访问此元素上的过滤器。

问题： 当我在用户页面上更新过滤器时，过滤器存储在 Redux 中。当我在另一个页面中打开模式时，用户列表会显示存储的过滤器。

我的目标： 分离这两组过滤器，或者不要在 Redux 中存储过滤器状态，或者在打开模式和关闭模式时重置过滤器。

我找到了这个主题：如何不使用 react-admin 更改列表过滤的 url？ 但我不明白必须覆盖哪些组件。我的另一个问题是我有第二个模态，其中有另一个模态，比如说“FanClub”。当我在两个模态列表之一中更改过滤器时，它会更新?filter=...URL 中的参数，导致第二个模态使用无法应用于此“FanClub”实体的过滤器打开。

以前有人遇到过这个问题吗？

标签： javascriptreactjsreact-reduxreact-routerreact-admin

解决方案

在 modal Resource 上，使用带前缀的资源名称，例如 modal:users，然后使用修剪前缀的代理 dataProvider。

<Resource name="modal:users" />

v2

const trimmerDataProvider => dataProvider => (type, resource, params) => {
    return dataProvider(type, resource.replace('modal:', ''), params)
}

v3

const trimmerDataProvider = dataProvider => ({
    ...dataProvider,
    getList: (resource, params) => dataProvider(resource.replace('modal:', ''), params)
})

这样用户列表和模态过滤器将存储在不同的键上。

请注意，您必须将 Resource 声明为 Admin child，以允许 ra 初始化 redux 存储

推荐阅读