javascript - React - 如何取消过滤。() 我的对象数组？

Question

我正在从外部 API 中提取对象数组。我正在获取名为 trails 的对象数组，并使用 .filter() 根据输入字段 userInput 过滤对象。代码如下所示:

 onChange = (e) => {
   let trails = this.props.trails;
   const userInput = e.currentTarget.value;
   const filteredTrails = trails.filter(
     (obj) => obj.name.toLowerCase().indexOf(userInput.toLowerCase()) > -1);
   console.log(userInput);
   console.log(filteredTrails);
   this.props.searchTrails(this.state.filteredTrails);
   this.setState({
     userInput,
   });
 };

如您所见，我将 filteredTrails 作为 props 传递给应用级组件中的 searchTrails 方法。它看起来像这样:

const searchTrails = (filteredTrails) => {
    setTrails(filteredTrails);
    console.log(filteredTrails);
  };

我的问题是过滤器只能以一种方式工作。

例如，如果用户想要按退格键，我如何将轨迹添加回此 filteredTrails 对象数组？

提前致谢!

Answer 1

“filter”没有反转，这就是为什么filter不会修改原始数组，而是返回一个新数组。因此，您的代码出错的地方是您用过滤后的版本覆盖了“源”。因此，您必须再次从 API 获取完整源代码，这是一种浪费，因为它可能没有改变。

现在，我猜测根据您的应用程序的结构方式，它可能不是过滤和显示找到的踪迹的同一个组件？无论哪种情况，都不要害怕存储当前显示内容的额外数组。

所以你的数据流可能是:
从API获取完整列表，存储在rawTrails和filteredTrails中(在您的应用程序组件中)
用户输入一些内容
从 rawTrails 创建一个子集并存储在 FilteredTrails 中(使用它来显示此列表或您正在执行的任何操作)
用户输入其他内容或清除过滤器
设置filteredTrails = rawTrails

另一种选择是简单地过滤每个渲染上的原始列表(用内存使用量换取 CPU 使用量)