根据用户输入字符串和菜单下拉项筛选数组

Question

在我的一个反应项目中，我很难过滤数组。

我的React有一个搜索栏，它返回一个searchQuery作为字符串和移动模式菜单，当单击这些模式时，该菜单将被添加到模式数组中。用户应能够：

1. 键入搜索查询并筛选数组
2. 使用菜单选择筛选数组的多个模式选项。
3. 使用搜索和菜单选择筛选练习数组。

​

const searchQuery = "ben";
const pattern = [];

const exercises = [
  {
    name: "bench press",
    movement: ["push", "pull", "squat", "hinge"]
  },
  {
    name: "squat",
    movement: ["push", "pull", "squat", "hinge"]
  },
  {
    name: "squat",
    movement: ["squat", "hinge"]
  },
  {
    name: "pushup",
    movement: ["push", "pull", "squat", "hinge"]
  },
  {
    name: "pullup",
    movement: ["pull", "squat", "hinge"]
  },
  {
    name: "bent over row",
    movement: ["push", "pull", "hinge"]
  }
];

let filteredExercises = [];

if (searchQuery && pattern) {
  filteredExercises = exercises.filter(
    exercise =>
      exercise.name.toLowerCase().indexOf(searchQuery) !== -1 &&
      exercise.movement.some(movement =>
        pattern.some(pattern => pattern == movement)
      )
  );
} else if (pattern.length > 0) {
  filteredExercises = exercises.filter(exercise =>
    exercise.movement.some(movement =>
      pattern.some(pattern => pattern == movement)
    )
  );
} else if (searchQuery) {
  filteredExercises = exercises.filter(
    exercise => exercise.name.toLowerCase().indexOf(searchQuery) !== -1
  );
  console.log(filteredExercises);
}

console.log(filteredExercises);

​

前两个条件语句工作并返回正确的数据。一旦我将第三个条件语句添加到searchQuery筛选，我就得到一个空数组作为回报。

有人能帮忙吗？

Answer 1

我认为检查数组的真实值而不是数组的长度是您最大的问题。

但是，我也认为，通过将重复的代码移到函数中并只运行一个filter，可以编写更简单的代码。如果您不喜欢三元操作符，可以用if/if else子句替换我拥有的内容(但是不要忘记返回)。

​

const searchQuery = "ben";
const pattern = [];

const exercises = [
  {
    name: "bench press",
    movement: ["push", "pull", "squat", "hinge"]
  },
  {
    name: "squat",
    movement: ["push", "pull", "squat", "hinge"]
  },
  {
    name: "squat",
    movement: ["squat", "hinge"]
  },
  {
    name: "pushup",
    movement: ["push", "pull", "squat", "hinge"]
  },
  {
    name: "pullup",
    movement: ["pull", "squat", "hinge"]
  },
  {
    name: "bent over row",
    movement: ["push", "pull", "hinge"]
  }
];

const excerciseTest = (name, searchQuery) => {
  

return name.toLowerCase().includes(searchQuery.toLowerCase())
}

const patternTest = (movement, pattern) => {
  return movement.some(movement => {
    return pattern.some(pattern => pattern === movement)
  })
}
         
const filteredExercises = exercises.filter(excercise => {

    // if (searchQuery && pattern.length > 0)
  return (searchQuery && pattern.length > 0)
    ? excerciseTest(excercise.name, searchQuery) && patternTest(excercise.movement, pattern)
    
    // else if (pattern.length > 0)
    : pattern.length > 0
    ? patternTest(excercise.movement, pattern)

    // else if (searchQuery)
    : searchQuery
    ? excerciseTest(excercise.name, searchQuery)
    : false
})

console.log(filteredExercises)

​

Answer 2

空数组是真实的，这意味着您的第一个if是在pattern为空时触发的-它永远不会到达您的最后一个else if。您可以转而测试pattern.length，并且它应该可以工作。

​

const searchQuery = "ben";
const pattern = [];

const exercises = [
  {
    name: "bench press",
    movement: ["push", "pull", "squat", "hinge"]
  },
  {
    name: "squat",
    movement: ["push", "pull", "squat", "hinge"]
  },
  {
    name: "squat",
    movement: ["squat", "hinge"]
  },
  {
    name: "pushup",
    movement: ["push", "pull", "squat", "hinge"]
  },
  {
    name: "pullup",
    movement: ["pull", "squat", "hinge"]
  },
  {
    name: "bent over row",
    movement: ["push", "pull", "hinge"]
  }
];

let filteredExercises = [];

if (searchQuery && pattern.length) {
  filteredExercises = exercises.filter(
    exercise =>
      exercise.name.toLowerCase().indexOf(searchQuery) !== -1 &&
      exercise.movement.some(movement =>
        pattern.some(pattern => pattern == movement)
      )
  );
} else if (pattern.length > 0) {
  filteredExercises = exercises.filter(exercise =>
    exercise.movement.some(movement =>
      pattern.some(pattern => pattern == movement)
    )
  );
} else if (searchQuery) {
  filteredExercises = exercises.filter(
    exercise => exercise.name.toLowerCase().indexOf(searchQuery) !== -1
  );
  console.log(filteredExercises);
}

console.log(filteredExercises);

​