如何让小吃店多次营业?

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