react-admin - 单个页面上有两个不同的列表组件

Question

所以我试图在一个屏幕上本质上有两个列表，我有一个向导，在这一步中我链接实体，例如将用户添加到个人资料中

我用了Use <List /> on React-Admin dashboard作为起点，然后给实体赋予不同的名称，但仍然不知道该怎么做。基本上，模式不应该与 url 绑定(bind)，而只是可以添加到配置文件中的用户列表，然后在此模式后面是该配置文件中的用户列表

initPropsLinkDeviceList = {
    basePath: "/profiles/create/link-devices",
    hasCreate: false,
    hasEdit: false,
    hasList: true,
    hasShow: false,
    history: {},
    location: { pathname: "/profiles/create/link-devices", search: "", hash: "", state: undefined },
    match: { path: "/profiles/create/link-devices", url: "/profiles/create/link-devices", isExact: true, params: {} },
    options: {},
    unlinked: "true",
    permissions: null,
    resource: "profile-users-unlinked",
    listactions: null,
    profileId: null,
}

在自定义路由中:

    <Route exact path="/profiles/create/:id/:step" component={ProfileWizard} />,

在应用程序中: <Admin>
<Resource name="profile-devices" />
<Resource name="profile-devices-unlinked" />

ProfileDevices.js

componentDidMount() {
    var initProps = {
        basePath: `/profiles/create/${this.props.match.params.id}/link-devices`,
        hasCreate: false,
        hasEdit: false,
        hasList: true,
        hasShow: false,
        history: {},
        location: { pathname: `/profiles/create/${this.props.match.params.id}/link-devices`, search: "", hash: "", state: undefined },
        match: { path: `/profiles/create/${this.props.match.params.id}/link-devices`, url: `/profiles/create/${this.props.match.params.id}/link-devices`, isExact: true, params: {} },
        options: {},
        unlinked: "true",
        permissions: null,
        resource: "profile-devices",
        profileId: this.props.match.params.id,
        listactions: <ProfileDevicesListActions profileId={this.props.match.params.id} />
    }
    this.setState({ 'initProps': initProps })
}
    render() {
    const {
        initProps
    } = this.state;

    if (!initProps) {
        return false;
    }


    return (
        <DevicesList {...initProps} {...this.props} />
    );
}

设备列表:

            <List {...this.props}
            perPage={10}
            filters={<DeviceSearchFilter />}
            actions={this.props.listactions}
            bulkActionButtons={<DeviceBulkActions />} filterDefaultValues={
                {
                    id: 1,
                    unlinked: this.props.unlinked,
                    profileId: this.props.profileId
                }}>

然后我在 LinkAction(模态对话框)中有相同的 initProps

在我的数据提供程序中，我已将这两种资源映射到同一个 api，因此只需添加一个过滤器即可显示所有资源与显示特定于 profileId 的资源

这两个资源似乎发生冲突，即使它们是 redux 中的不同资源，假设这是由于 url 路由造成的，本质上我想我需要模式中的 不与 url 绑定(bind)。谢谢

补充一下，我意识到我可以通过手动调用 dataProvider 并单独处理它们(例如演示仪表板)来实现这一点，但希望获得过滤器、分页等的“神奇”好处。

Answer 1

The two resources seem to be clashing even though they are different resources in redux, assuming this is due to the url routing, essentially I suppose I need the in the modal to not be tied to the url.

你说得对。 List 组件确实与 url 紧密耦合，因此不支持将其中两个组件放在同一页面中(请参阅 https://github.com/marmelab/react-admin/issues/2903 )。

我们还没有这些情况的答案，您现在必须实现自己的列表组件。