我正在努力过滤我的一个 react 项目中的数组。
我的 React 应用程序有一个搜索栏,它以字符串形式返回 searchQuery 和运动模式菜单,单击时会添加到模式数组中。 用户应该能够:
- 输入搜索查询并过滤数组
- 使用菜单选择多个模式选项来过滤数组
- 通过搜索和菜单选择来过滤练习数组。
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 进行过滤,我就会得到一个空数组作为返回。
谁能帮忙解决这个问题吗?
最佳答案
空数组是truthy,这意味着当pattern
为空时,您的第一个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);
关于javascript - 根据用户输入字符串和菜单下拉项过滤数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53769362/