React多选复选框过滤数据

Question

我有一个应用程序从这个端点检索todo列表

我已经构建了一个CheckBoxDropDown组件来选择每个todo的id

在CheckBoxDropDown.js组件中，我将函数onChange作为道具传递

const handleChange = (event) => {
const value = event.target.value;
setSelected(value);
onChange(value);
};
<Select
labelId="mutiple-select-label"
multiple
value={selected}
onChange={handleChange}
renderValue={(selected) => selected.join(", ")}
MenuProps={MenuProps}
>

在App.js中，我将数据(任务(传递给我的组件，一切都很好。

<CheckBoxDropDown onChange={handleFilterTasks} tasks={tasks} />

如何在handleFilterTasks方法中为我在下拉列表中选择的任何id筛选任务id？

这是我试图做的，但我无法获得我的结果数组与过滤器数据por-id选择

const handleFilterTasks = (item, e) => {
const task = e
const userId = tasks[e]
const result = tasks.filter(val => val.id !== userId);
console.log(result);
// setFilteredData(task);
}

你可以在这里看到演示

Answer 1

这可以通过过滤值数组来完成。您有一个用于渲染列表的数组，并且您有选定的值。考虑下面的例子。这将返回一个具有选定UserId(此处为4(的数组。对数组进行筛选后，可以调用setSelected(filteredArray(来更新表。让我知道这是否有效！如果有效，请将其标记为答案！

const valuesList = [{id: 1, name:'spray'}, {id:2, name:'limit'}, {id:3, name:'elite'}, {id:4, name:'exuberant'}];
const userId = 4
const result = valuesList.filter(val => val.id == userId);
console.log(result);