使用 Lodash 在 React 中进行数据过滤答案

【问题标题】：Data filtering in React using Lodash使用 Lodash 在 React 中进行数据过滤
【发布时间】：2015-12-04 23:31:00
【问题描述】：

我目前正在 React.js 中制作一个 Table 组件。我的目标是实现一个类似于https://www.datatables.net/ 使用的搜索功能。

以下是我使用过滤器的代码，其中包含来自 Lodash 库的函数。此代码不起作用，因为它只查找完全匹配。例如，如果我的数据数组中的对象有水果：“apple”，则过滤器“app”没有匹配项。

  data = filter(data, (row) => {
    return includes(row, this.state.filter);
  });

有什么方法可以使用 lodash 的任何内置函数实现模糊搜索？如果没有，您能建议其他方式吗？

【问题讨论】：

标签： reactjs search lodash

【解决方案1】：

lodash 不会有你需要的东西。根据您的搜索要求，您可以使用基于距离度量的搜索，例如 Levenshtein。或者可能是一个substring 长度度量。如需图书馆，请查看fuzzy

【讨论】：

【解决方案2】：

因此，他们正在搜索名字和姓氏中的字符与您输入的内容匹配的位置。

在lodash中，你可以使用这样的过滤器..

.filter(contact => !(this.state.filter && contact.lastName.toLowerCase().indexOf(this.state.filter) == -1 && contact.firstName.toLowerCase().indexOf(this.state.filter) == -1))

这是假设您将搜索值设置为状态并且您希望匹配名字/姓氏字段。您应该能够对其进行修改以满足您的需要。

【讨论】：