材质 UI 使用递归渲染的嵌套列表不适用于反应钩子

Question

我正在做一个项目，我需要有一个侧边栏，其中包含使用材料UI创建的嵌套列表，如果我去演示并复制嵌套列表代码，一切都很好，但它带有大量代码重复。所以经过一些挖掘，我发现了用类编写的递归渲染函数要点。我正在使用反应钩子，函数逻辑没有按预期工作。

问题：我有3级导航，一个父级，然后子项和子项包含更多项目(孙子到父级(。因此，当我单击父项时，会出现所有很好子项，但是当我单击任何子元素时，整个列表都会关闭。

这是我的代码：

// useState hook with empty object as an initial Value
const [open1, setOpen1] = React.useState({});
// this method sets the current state of a menu item i.e whether it is in expanded or collapsed or a collapsed state
const handleClick = (param) => {
setOpen1(prevState => ({[param]: !prevState[param]}));
};
// if the menu item doesn't have any child, this method simply returns a clickable menu item that redirects to any location and if there is no child this method uses recursion to go until the last level of children and then returns the item by the first condition.
function nestedMenu(items) {
return items.map((nav) => {
if (!nav.children) {
return (
<div key={nav.id}>
<ListItem button>
<ListItemText primary={nav.name} />
</ListItem>
</div>
)
}
return (
<div key={nav.id}>
<ListItem button onClick={()=>handleClick(nav.name)}>
<ListItemText primary={nav.name} />
{open1[nav.name] ? <ExpandLess /> : <ExpandMore />}
</ListItem>
<Collapse in={open1[nav.name] } timeout="auto" unmountOnExit>
<List component="div" disablePadding>
{ nestedMenu(nav.children)}
</List>
</Collapse>
</div>
)
})
}

之后，我将 json 数据作为返回方法中的参数调用nestedMenu函数

<List> {nestedMenu(Links.items)} </List>

谁能解释一下我在这一切中做错了什么，我一直在努力寻找问题所在。任何帮助将不胜感激。

Answer 1

问题是你改变了整个open1对象：

const handleClick = (param) => {
setOpen1(prevState => ({[param]: !prevState[param]}));
};

例如，如果您{p1:true, p2:false}并执行handkeClick('p1'(， open1 将被{p1:false}。 您需要保持 open1 的其他成员不变，只需更新您想要的成员：

const handleClick = (param) => {
setOpen1(prevState => 
retrun {...prevState ,[param]: !prevState[param]}
);
};