子组件在反应中意外地更新了父组件状态

Question

我使用react与MUI。我使用的是MUI List组件，其中每个列表可能有一个嵌套列表。问题是当我打开一个嵌套列表时，父组件被关闭。我不知道我做错了什么。你可以使用这个CodeSandbox

这是我的应用程序的图像:Gif

Answer 1

您的问题是您将onClick添加到包含所有其他子项的ListItem上，因此这意味着每当您触发单击任何子项时，您也会意外触发主ListItem。这就是为什么当你点击任何子菜单项时，主菜单项会崩溃的原因。你可以阅读更多关于事件传播的信息。

最简单的解决方法是将onClick={handleToggleCollapse}从ListItem移动到ListItemButton

<ListItem {...listItemProps} sx={{ display: "block" }}>
<ListItemButton onClick={handleToggleCollapse}>
{icon && <ListItemIcon>{icon}</ListItemIcon>}
<ListItemText primary={text} />
{open ? (
<IoIosArrowUp className="text-lg" />
) : (
<IoIosArrowDown className="text-lg" />
)}
</ListItemButton>
<Collapse in={open} timeout={300}>
<List disablePadding>
<ListItems listItems={nestedItems} />
</List>
</Collapse>
</ListItem>

对于事件传播预防，您应该像下面这样修改handleToggleCollapse

function handleToggleCollapse(e: SyntheticEvent) {
e.stopPropagation();
setOpen((prev) => !prev);
}

沙箱