通过自定义参数过滤<List>

Question

我使用的是react-admin (v3.2)，正在尝试创建一个自定义的过滤器组件。我的实体有一个属性dateEnd，我想根据dateEnd是expired还是not expired来过滤数据。我设法获得了所有实体的列表：expired和not expired。

但是，我不知道如何向用户显示此列表。

是否可以通过某种方式在URL中创建查询

这是我的方法，返回expired和not expired实体的列表：

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 prop。

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>

然后，例如，使用Tabs获取children组件以更新该status字段。这些Tabs将更新您的state，这些prop可以使用class methods或Hooks向上传播到List的status属性。

Second，你可以使用filters prop。

有趣的是，这就是你想要的，但它违背了你的愿望。

tl;dr最初会同时返回expired和not expired，然后让用户通过filters进行查询。

使用这种方法，通常会同时呈现expired和not expired的List。

然后提供一个filters道具，允许用户筛选他们想要查看的内容。

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

即使在这里，您仍然会查询这些数据，但没有默认值。

因此，用户最初会看到您的所有记录的长长列表。

根据您的数据，第一种方法效果最好。

但这两个props实际上可以同时使用，这取决于您的目的。