如何让小吃店多次开张？

Question

我创建了一个简单的代码框来演示该问题。单击该按钮，MUI 快餐栏将打开。关闭小吃店并尝试重新打开它。什么都没有发生。

这可能与我使用钩子的方式有关吗？

https://codesandbox.io/s/magical-ramanujan-vbnbl

更新：这是“固定”代码。它现在使用 React Context 为您提供一个不错的“全局”快餐栏。 https://codesandbox.io/s/recursing-wozniak-2pow0

Answer 1

您正在使用两种不同的数据源来控制可见性，并且您在此过程中感到困惑。将它们合并为一个。您有一个处理此逻辑的单击处理程序，因此修改isOpen 使其成为切换（而不是始终设置为true）并将该函数向下传递以在Snacky 中使用。

// index.tsx
  const onSubmit = async () => {
    setSnackyProps(prev => ({
      message: "now close me and click the button again",
      variant: "error",
      isOpen: !prev.isOpen
    }));
  };
<Snacky {...snackyProps} onSubmit={onSubmit} /> // highly irrelevant function name. probably want to change it

// snacky.tsx
  {onSubmit} = props
  function handleClose() {
    onSubmit();
  }

https://codesandbox.io/s/condescending-leftpad-pndo3