通过自定义参数过滤实体列表

Question

我正在使用react-admin框架（v3.2），并且正在尝试创建自定义过滤器组件。我的实体有一个属性dateEnd，我想根据dateEnd是否过期来过滤这些实体。我设法获取了已过期和尚未过期的实体的List，但是我不知道如何向用户显示列表。是否可以通过某种方式在URL中创建查询？

这是我的方法，该方法返回过期和未过期的实体的列表：

handleChecked = () =>
    {
        if(this._mounted) this.setState({ checked: !this.state.checked, currentDate: new Date() }, () =>
        {
            const currentDateFormated = this.state.currentDate.toISOString();
            if (this.state.msgDates !== null)
            {
                if (this.state.checked === false)
                {
                    const notExpired = this.state.msgDates.filter(msg => get(msg, ["publish", "dateEnd"], []) > currentDateFormated);
                    console.log(notExpired, 'NOTEXPIRED');
                }
                else
                {
                    const expired = this.state.msgDates.filter(msg => get(msg, ["publish", "dateEnd"], []) < currentDateFormated);
                    console.log(expired, 'EXPIRED');
                }
            }
        });
    }

然后我在Filter中初始化我的组件：

const MessageFilter = (props) => (
    <Filter {...props}>
        <TextInput source="_id" alwaysOn />
        <TextInput source="layout.caption" alwaysOn />
        <ExpiredFilter alwaysOn />
    </Filter>
);

任何想法如何显示已过期或未过期实体的列表？

先谢谢您。

Answer 1

您打算过滤的任何内容都应包含在<List>中。在您的情况下，您的Resource / endpoint应该返回一个dateEnd（到期或未到期）。两种设计模式可以在这里工作：

First，您可以使用filterDefaultValues属性。tl; dr使用默认查询（status），切换expired / not_expired（可以使用Tabs呈现）。

这将回答您的两个问题：

• “是否可以通过某种方式在URL中创建查询？”
• 任何想法如何显示已过期或未过期实体的列表？

<List
  {...props}
  // Do you want your users to start by seeing "expired" or "not expired"?
  // You can place it within `filterDefaultValues`
  filterDefaultValues={{ status: 'not_expired' }}
  sort={{ field: 'date_added', order: 'DESC' }}
  perPage={10}
>{ Children }</List>

例如，获得children组件以通过使用status更新该Tabs字段。那些Tabs将更新您的state，可以使用List或status将其传播到class methods的Hooks道具。

Second，您可以使用filters道具。有趣的是，这是您的初衷，但它挫败了您想要的。 tl; dr最初同时返回expired和not expired，并留给用户通过filters查询。

[使用这种方法，通常会同时渲染List和expired的not expired。然后提供filters道具，以允许用户筛选他们想要看到的内容。

<List
  {...props}
  // So you'd place your `MessageFilter` within `filters`
  filters={<MessageFilter />}
  sort={{ field: 'date_added', order: 'DESC' }}
  perPage={10}
>{ Children }</List>

即使在这里，您仍然要查询该数据，但没有默认值。因此，用户最初会看到一长串所有您的记录。

根据您的数据，第一种方法效果最好。但实际上，根据您的目的，两个props实际上可以同时使用。