React.js和Ant Design的范围筛选器出现开始和结束日期错误

Question

在我的react.js ant.design项目中，我正在尝试基于2个日期选择器实现表格范围过滤：开始日期和结束日期。我将它们插入到筛选下拉菜单中，但是当我点击“搜索”按钮时，我收到一个错误消息，说“values.some不是一个函数”。

例如，您可能会在此处看到

目标是将2个日期数组发送到后端进行搜索：开始日期和结束日期。我想它会发送一个moment.js对象，需要以某种方式转换为字符串，但我不知道在哪里进行转换。欢迎任何修复方法的想法。

- Masha

---

任何代码都可以更好地查看您的确切问题。 - Krina Soni

https://codesandbox.io/s/confident-swartz-veucu - Masha

有更新吗？仍然无法按日期范围筛选。 - Hudson Medeiros

Answer 1

修改将值传递给setSelectedKeys函数的方式，setSelectedKeys函数接受数组作为值。

因此，为了使其正常工作，请将您的代码更改为以下内容：

onChange={e => setSelectedKeys([e.format("DD.MM.YYYY")])}

同时，您还必须处理日期选择器的“清除”事件，以避免向setSelectedKeys函数传递空值。

onChange={e => setSelectedKeys(e !== null ? [e.format("DD.MM.YYYY")] : [])}

- Angelo Ganaden Jr.

Answer 2

你的搜索功能没有获取到所选日期的确切值 - selectedKeys[0]，它只获取了最新选择的日期。 尝试在控制台中查看。

通过状态解决问题的方法是：无论你选择的是什么开始日期和结束日期，在搜索函数中获取这些值并将其传递给API/后端。

- Krina Soni

Answer 3

正如Angelo所指出的那样

setSelectedKeys函数接受一个数组作为值。

-> 但他的解决方案没有考虑区间的上限。

正如Krina Soni所指出的那样

您的搜索函数未获取所选日期的确切值-selectedKeys [0]，它仅获取最新选择的日期。

-> 您将始终只获得一个日期。

我发现的最简单的解决方法是将startdate和enddate值连接为字符串，并将其作为一个项目放入数组中。在您的过滤逻辑函数中再次拆分它。我就是这样解决的。

- Oliver