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

Question

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

大致是这样的:

/* 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 将过滤器/页面/排序值传播到查询中，并维护过滤器对象的“签名”(相应 JSON 的字符串表示)以检测当前过滤器的变化，以防万一网址更改。通过这种方法，过滤器和分页值在用户来回导航时保持事件状态，并且仅在实际字段值发生变化时才会更新。

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

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

注意:RA 已经在其 Redux 存储中保留了每个资源的过滤器值，所以我不明白为什么他们没有对查询使用类似的语法/方法。

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

这是 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>
);