React-hooks弹出上下文-如何？

Question

我创建了一个反应弹出上下文，其中您使用popupPush函数可以推送新消息，这些消息将在一段时间后一次又一次地显示。您也可以通过单击隐藏当前弹出窗口以查看下一个弹出窗口。一切正常，除非您同时按下几个弹出窗口，否则只会显示最新的弹出窗口：

  useEffect(() => {
    popupPush({ text: x++ })
    popupPush({ text: x++ })
    popupPush({ text: x++ })

    // eslint-disable-next-line
  }, [])

我该如何解决？也许我的整个概念不是最好的？

Codesandbox working example。

Answer 1

在重新理解正确的功能和带有react钩子的useEffect用法后，我想出了可行的解决方案：

Codesandbox example。

大多数需要useCallback挂钩。对于我来说，这是意外的，其中的包装功能不会触发不必要的重发。