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

Question

我正在尝试使用 Chakra-UI React.js 组件库以编程方式显示Chakra-UI Toast，并且正在努力让它工作。 Chakra-UI Toast 文档仅显示了如何基于按钮单击显示吐司，但我想以编程方式显示它 - 在调用 AJAX 后返回的 promise 中。 我不确定它是否可行，但我想有一个 showToast function 我可以打电话来展示它。

我正在将 Chakra-UI 集成到 React.js web 应用程序中，我对 React.js 和 Chakra-UI 都很陌生。

更新

这是一个 CodeSandbox，展示了我正在努力实现的目标： https://codesandbox.io/embed/upbeat-rhodes-9zkii 。 我在那里有一个按钮，当它被点击时会显示吐司，但我想在 TODO 所在的 setTimeout 中显示它。

Answer 1

您可以使用 React 的 useEffect 挂钩以编程方式触发 toast。 useEffect 钩子适用于任何副作用，例如获取数据或 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

Answer 2

这是我的解决方案，以防万一有人偶然发现这个线程：

import { useToast } from "@chakra-ui/react";
import { useState, useEffect } from "react";

export function useToastHook() {
  const [state, setState] = useState(undefined);
  const toast = useToast();

  useEffect(() => {
    if (state) {
      const { message, status } = state;

      toast({
        title: status,
        description: message,
        status: status,
        duration: 3000,
        position: "top",
        isClosable: true,
      });
    }
  }, [state, toast]);

  return [state, setState];
}

并使用这样做（您也可以将 newToast 传递给任何不在 a.jsx 文件中的 function）：

import { useToastHook } from "../components/Toast";

const App = () => {
  const [state, newToast] = useToastHook();

  const someThingHappens = (message) => {
    newToast({ message: message, status: "error" });
  };

  return (
    <div>
    ......
   </div>
  );
};