Javascript 反应-如何取消筛选。（）我的对象数组？

我正在从外部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

作为道具传递给我的应用程序级组件中的

searchTrails

方法。看起来是这样的：

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

我的问题是过滤器只能单向工作。

例如，如果用户想要点击backspace，我如何将轨迹添加回这个

filteredTrails

对象数组

---

提前谢谢

您是否应该添加FilteredRails而不使用它

   this.props.searchTrails(filteredTrails);

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

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

因此，您的数据流可能是：
从API获取完整列表，存储在rawTrails和filteredTrails中（在应用程序组件中）
用户键入内容
从rawTrails创建一个子集并存储在filteredTrails中（使用此选项显示此列表或您正在执行的任何操作）
用户键入其他内容或清除其筛选器
设置filteredTrails=rawTrails

---

另一个选项是简单地过滤每个渲染上的原始列表（用内存使用率换取CPU使用率）

这非常有用！非常感谢。