Question

我正在努力在我的一个React项目中过滤一个数组。

我的React App具有一个搜索栏，该搜索栏将searchQuery作为字符串和运动模式菜单返回，单击时会将其添加到模式数组中。用户应该能够：

输入搜索查询并过滤数组
使用菜单选择多个模式选项以过滤数组
使用搜索和菜单选择来过滤运动数组。

    Optional.ofNullable(abc).ifPresent(abc -> params.add("abc","123"));

前两个条件语句起作用并返回正确的数据。一旦添加第三个条件语句以通过searchQuery进行过滤，我就会得到一个空数组。

任何人都可以帮忙吗？

Answer 1

一个空数组是 truthy ，这意味着当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);

Answer 2

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

但是，我还认为可以通过将重复的代码移至函数并仅运行一个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)

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

2 个答案: