javascript - 如何以编程方式显示 Chakra-UI Toast？

Question

我正在尝试显示 Chakra-UI使用 Chakra-UI React.js 组件库以编程方式进行 Toast，并且正在努力使其工作。 Chakra-UI Toast documentation仅显示如何根据按钮单击显示 toast，但我想以编程方式显示它 - 在进行 AJAX 调用后返回的 promise 中。我不确定这是否可行，但我想要一个可以调用的 showToast 函数来显示它。

我正在将 Chakra-UI 集成到 React.js Web 应用程序中，并且对 React.js 和 Chakra-UI 都相当陌生。

更新

这是一个 CodeSandbox，显示了我想要实现的目标:https://codesandbox.io/embed/upbeat-rhodes-9zkii 。我在那里有一个按钮，单击时会显示 toast，但我想在 TODO 所在的 setTimeout 中显示它。

Answer 1

您可以使用 React 的 useEffect Hook 以编程方式触发 toast。 useEffect 钩子(Hook)适用于任何副作用，例如获取数据或 DOM 操作。

 const toast = useToast();

  useEffect(() => {
    // Show toast every 5 seconds.
    setInterval(() => {
      toast({
        title: "Current Time.",
        description: `Time ${new Date()}`,
        status: "success",
        duration: 5000,
        isClosable: true
      });
    }, 5000);
  }, []); // Passing in empty array so this will only get called on mount

完整解决方案请查看代码沙箱https://codesandbox.io/s/eloquent-knuth-bt5u8?fontsize=14