一个屏幕上带有过滤器的多个 React Admin 列表

Question

我们基于 React Admin 构建了一个管理 UI，在一些情况下，我们希望在一个屏幕上使用多个列表以方便使用。例如。在用户详细信息视图中，我们想要显示用户存档的多个地址，以及用户的购买记录。 RA术语中的用户、地址和购买都是"resources"。

大致是这样的：

/* file <...>/resources/users/UserShow.js */

import AddressList from '../addresses/AddressList';
import PurchaseList from '../purchases/PurchaseList';

const UserShow = ({ id, classes, translate, ...props }) => (
    <Fragment>
        <Show id={id} {...props}>
            ...render user details here...
        </Show>
        <AddressList {...props} basePath={'/addresses'} resource={'addresses'} filter={{ userId: id }} />
        <PurchaseList {...props} basePath={'/purchases'} resource={'purchases'} filter={{ userId: id }} />
    </Fragment>
);

其中大部分似乎都运行良好，但过滤器让我们有些头疼。它周围的一切似乎一次只为一个过滤器构建，没有任何自定义方法（例如指定属性用于 redux 和 react-router 存储中的过滤器，而不是使用硬编码的过滤器)

有没有人在同一个屏幕上制作过两个可过滤列表并且有更多的建议？

Answer 1

我最终想出了一个我想分享的解决方法。

问题在于 RA 将 filter/page/sort 值传播到查询中，并维护过滤器对象的“签名”（相应 JSON 的字符串表示）以检测URL 变化时的当前过滤器。使用这种方法，过滤器和分页值在用户来回导航时保持活动状态，并且仅在实际字段值更改时更新。

如果每个屏幕都有一个列表，那是一件好事，但在我们的例子中，一个列表的过滤器更新会导致值反向传播到屏幕上的每个其他列表中。

首先，我尝试通过修改查询来保留所有过滤器，以便每个过滤器都使用它们的资源名称作为键。不幸的是，这导致了大量更改，包括由于修补 RA 内部结构而复制整个 RA 组件。

注意：RA 已经在其 Redux 存储中保留了每个资源的过滤器值，所以我不明白为什么他们不使用类似的 syntax/approach 进行查询。

另一种选择是完全切断对查询的传播。权衡是您不能为特定搜索添加书签，并且在导航时需要重新激活过滤器，但这似乎是一个可以接受的小缺点。

这是 RA 3 中更新查询的相关代码：https://github.com/marmelab/react-admin/blob/master/packages/ra-core/src/controller/useListParams.ts#L164

history.push({
    search: `?${stringify({
        ...newParams,
        filter: JSON.stringify(newParams.filter),
        displayedFilters: JSON.stringify(newParams.displayedFilters),
    })}`,
});

无法直接修改此行为，但我们可以向 RA 提供我们自己的历史实现并覆盖搜索参数。相应的猴子补丁如下所示：

const history = createBrowserHistory({
    basename: process.env.PUBLIC_URL
});

const oldPush = history.push;
history.push = state => {
    oldPush({
        ...state,
        search: null,
    });
};

然后可以这样使用：

const App = () => (
    <Admin
        history={history}
        ...
    >
        ...
    </Admin>
);

一个屏幕上带有过滤器的多个 React Admin 列表

Multiple React Admin Lists with filters on one screen

reactjs

react-admin