为什么我的过滤器无法正常工作？

Question

我有一组健身房类，它们从数据库中提取，这是该日志：

将其拉出时，它们将放入两个不同的数组中：

gymClasses: [],
filteredClasses: [],

然后，当用户单击其中一个下拉菜单时，它会使用this.filterClasses(event.target.value);

获得所选下拉菜单的值。

然后运行该函数：

filterClasses(value) {
  const newFilteredClasses = this.state.gymClasses.filter( (value) => {
    return this.state.gymClasses.type === value;
  });

  this.setState({filterClasses: newFilteredClasses});
  console.log('values ', this.state.filteredClasses);
}

当我打开应该向我显示filteredClasses的最后一个console.log时，它向我显示了与未过滤的类相同的类。

这是最后一个

的结果

console.log('values ', this.state.filteredClasses);

任何帮助的建议将不胜感激！

Answer 1

在过滤器回调中，您正在检查

的类型

this.state.gymClasses.type === value

理想情况下，您应该使用回调param而不是this.state.gymClasses.type

尝试

filterClasses(selectedValue) {
  const newFilteredClasses = this.state.gymClasses.filter( (value) => {
    return value.type === selectedValue;
  });

  this.setState({filterClasses: newFilteredClasses});
}