Json 尝试在react中设置复选框搜索筛选器

我正在尝试制作一个函数，当 用户选中了一些复选框。 我尝试了很多方法，但仍然不知道如何去做 显示过滤后的结果

import React，{useState}来自“React”；
从“/filter.module.css”导入样式；
常量过滤器=（{reqInfo，handleFilter}）=>{
const[checkedHello，setCheckedHello]=useState（[]）；
常量[checkedWords，setCheckedWords]=useState（[]）；
const hello=[“欢迎”，“世界”]；
const words=[“name”，“my”]；
常量handleHello=（值）=>{
const currentIndex=checkedHello.indexOf（值）；
const newChecked=[…checkedHello]；
如果（当前索引==-1）{
newChecked.push（值）；
}否则{
新检查。拼接（当前索引，1）；
}
setCheckedHello（newChecked）；
handleFilter（新检查的“方法”）；
};
常量handleWords=（值）=>{
const currentIndex=checkedWords.indexOf（值）；
const newChecked=[…checkedWords]；
如果（当前索引==-1）{
newChecked.push（值）；
}否则{
新检查。拼接（当前索引，1）；
}
设置校验字（newChecked）；
handleFilter（newChecked，“你好”）；
};
返回(
{hello.map（（hello）=>(
handleHello（{hello}}
/>
{你好}
))}
{words.map（（words）=>(
handleWords（e.currentTarget.value）}
/>
{words}
))}
);
};
导出默认过滤器；

这是上部组件

从“React”导入React，{useffect，useState}；
从“./过滤器/过滤器”导入过滤器；
从“./request\u box/request\u box”导入RequestBox；
从“/item\u container.module.css”导入样式；
const ItemContainer=（{requestInfo}）=>{
const[reqInfo，setReqInfo]=useState（[]）；
const[filtered，setFiltered]=useState（{method:[]，material:[]}）；
useffect（（）=>{
然后（（info）=>setReqInfo（info））；
}，[requestInfo]）；
常量handleFilter=（过滤器，键）=>{
const newFiltered={…filtered}；
newFiltered[key]=过滤器；
设置过滤（新过滤）；
showFilteredRes（新过滤）；
};
常量showFilteredRes=（已过滤）=>{
reqInfo.forEach（（信息）=>{
log（info.hello）；
Object.key（已过滤）.forEach（（key）=>{
控制台日志（键）；
如果（信息===键）{
console.log（“真”）；
}
});
});
};
返回(

{reqInfo.map（（info）=>(
))}

);
};
导出默认ItemContainer；

reqInfo数据如下所示

{
“测试”：[
{
“id”：1，
“标题”：“测试1”，
“你好”：[“欢迎”，“世界”]，
“文字”：[“名称”]，
},
{
“id”：2，
“标题”：“测试2”，
“你好”：[“世界”]，
“文字”：[“我的”]，
},

而我正在挣扎的部分是 使showFilteredRes在上层阶级中发挥作用。

---

我如何将reqInfo与过滤后的数据进行比较并进行过滤？

请您添加一个工作示例……您可以使用codesandbox进行sameoh，很抱歉，这里是