javascript - 抽屉关闭时触发 useEffect 的问题

Question

我正在使用 Material-UI 抽屉组件，并希望从另一个组件切换抽屉。我使用 React HookuseEffect来监听props.open变量何时发生变化。问题是，即使变量再次设置，变量也不会从 true 改变。我将通过下面的代码片段进一步解释：

在我的抽屉组件中：

const [open, setOpen] = useState(props.open);

useEffect(() => {
    setOpen(props.open)
  }, [props.open])  

return (
    <Drawer anchor="left" open={open}>
        <HeadContainer>
          <Header>{`Edit ${props.name}`}</Header>
          <IconButton onClick={() => setOpen(false)}>
            <Close />
          </IconButton>
        </HeadContainer>
    ...

在我调用抽屉的组件中：

const [open, setOpen] = useState(false);

return(
...
        <IconButton onClick={() => setOpen(true)}>
          <Edit/>
        </IconButton>
...

如您所见，我希望关闭 iconButton 关闭抽屉，并希望其他组件中的编辑按钮打开抽屉。问题是抽屉只打开一次，因为props.open变量只真正“改变一次”，从null到true。现在，每隔一次它从哪个更改true为true不足以呈现更新useEffect

我希望我解释清楚了。请帮忙！！！

标签： javascriptreactjsmaterial-ui