Javascript 如何使用钩子更改父组件内子组件数组的状态？

我有一个父组件，它有一个div，其中包含一个ol，其中包含自定义组件。 每个组件都有一个状态，我在其中存储一个“选中”布尔值。我需要在父组件中设置一个按钮，该按钮将清除所有子组件状态并将其设置为false。我正在尝试使用“useRef”和“useImperialiveHandle”，但无法理解

国家列表（子组件）

导出默认函数CountryListing（{country}，ref）{
const countryRef=useRef（）；
const[checkbox，toggleCheckbox]=useState（false）
常量clearCheckbox=（）=>{
切换复选框（false）；
}
使用命令式句柄（参考，（）=>({
清除：（）=>{ref.current.clearCheckbox（）}
}
));
返回(

切换复选框（！checkbox）}>
{country}

);

}

可折叠（父组件）

导出可折叠的默认函数（）{
const[open，togglePanel]=useState（false）；
const[国家]=使用国（[“墨西哥”、“巴西”、“英国”、“未提供-加拿大”、“美国”、“俄罗斯”、“澳大利亚”、“秘鲁”、“中国”、“台湾”、“巴基斯坦”、“也门”、“泰国”、“新西兰”、“捷克共和国”、“西班牙”、“日本”、“韩国”、“南非”、“阿根廷”、“阿富汗”、“安哥拉”、“安道尔”、“亚美尼亚”、“斐济”，“芬兰”、“爱沙尼亚”、“厄瓜多尔”、“埃及”、“匈牙利”、“伊朗”、“爱尔兰”、“奥地利”、“波兰”、“科威特”、“利比亚”、“摩纳哥”、“蒙古”、“莫桑比克”、“尼泊尔”、“意大利”、“挪威”、“巴巴多斯”、“玻利维亚”、“保加利亚”、“智利”、“哥伦比亚”]）；
常量[searchTerm，setSearchTerm]=useState（“”）；
const[searchResults，setSearchResults]=useState（国家）；
//待办事项标题未完全显示
常量[标题]=“位置”；
const ref=useRef（false）；
const countryComponents=（国家）=>{
constCountriesList=countries.map（thisCountry=>）；
返回国名单；
}
const[countryComponentsList，modifyCountryComponentsList]=useState（countryComponents（搜索结果））
常量clearAllAction=（）=>{
ref.current.clearCheckbox（）；
}
常量首字母=（国家）=>{
const[countryInitials]=useState（getInitials（countries.countries））；
const listInitials=countryInitials.map（（initial）=>
{initial}
）；
返回(
{listInitials}
)
}
常量搜索=（术语）=>{
log（'searchTerm为'+searchTerm'）；
如果（！术语）{
设置搜索结果（国家）；
}
否则{
const results=countries.filter（country=>country.toLowerCase（）.includes（term））；
设置搜索结果（结果）；
}
}
返回(
{
setSearchTerm（event.target.value）；
搜索（搜索词）；
}}
onChange={（事件）=>{
setSearchTerm（event.target.value）；
搜索（搜索词）；
}}
onLoad={（事件）=>{
setSearchTerm（event.target.value）；
搜索（搜索词）；
}}
>
搜索（搜索词）}>S
togglePanel（！open）}className=“header”>
{title}
{
开门(
X全部清除
{countryComponentsList}
)：null
}
);
}

---

我尝试过寻找答案，但没有什么能帮助我理解，他们通常会提到单个组件。虽然我的理解是，我需要为一个组件实现它，然后映射它们。

我对您尝试的方式不是很熟悉，但我可以建议一种替代方法。而不是不这样做帽子，你可以这样做：

const [checkedElements, setCheckedElements] = useState([]);

然后，当您映射并创建元素时，您可以使用map方法的索引

onClick={()=>setCheckedElements([...checkedElements, index])}
checked={checkedElements.includes(index)}

通过在按钮上添加以下内容，可以在单击按钮时清除所有元素：

onClick={setCheckedElements([])}

---

这是一个完整的工作示例，您可以从父项检查所有标签：

const Parent=（）=>{
const[todos，setTodos]=React.useState([
{id:1，标签：“唤醒”，完成：true}，
{id:2，标签：“煮咖啡”，填写：false}，
{id:3，标签：“开始工作”，完成：false}
]);
const checkAll=React.useMoom（（）=>{
常量filterTodos=Object.assign（[]，todos）；
返回(
filterTodos.filter（f=>f.completed==true）。长度===todos.length
);
}[待办事项]；
const checkAllTodos=e=>{
常量值=e.target.checked；
setTodos（current=>current.map（f=>（{…f，completed:value}））；
};
const checkTodo=React.useCallback（id=>{
setTodos（当前=>
当前.map（项=>{
如果（item.id==id）返回{…item，completed:！item.completed}；
其他退货项目；
})
);
}, []);
返回(


todos{checkAll}

{todos.map（项=>(
{item.label}
))}

);
};
const Todo=React.memo（{checked，children，id，change}）=>(

更改（id）}/>
{儿童}

));
ReactDOM.render（，document.getElementById（“根”））

---

我实际上正在考虑尝试类似的方法。我会尝试并相应更新。

onClick={()=>setCheckedElements([...checkedElements, index])}
checked={checkedElements.includes(index)}

onClick={setCheckedElements([])}