我目前正在对邮箱js使用成功和错误祝wine 词 但是我想通过我的定制加载器使用toastify Promise,这是我当前的代码

import emailjs from "@emailjs/browser";
import { toast } from 'react-toastify';

export const sendEmail = ({ service_id, templete_id, values, theme, setIsloading, pubkey }) => {
  emailjs.send(service_id, templete_id, values, pubkey).then(
    () => {
        toast.success("Application submitted !", {theme})
        setIsloading(false);
    },
    (error) => {
      console.error(error);
      toast.error("Something went wrong.", {theme});
      setIsloading(false);

    }
  );
};
const resolveWithSomeData = new Promise(resolve => setTimeout(() => resolve("world"), 3000));
toast.promise(
    resolveWithSomeData,
    {
      pending: {
        render(){
          return "I'm loading"
        },
        icon: false,
      },
      success: {
        render({data}){
          return `Hello ${data}`
        },
        // other options
        icon: "?",
      },
      error: {
        render({data}){
          // When the promise reject, data will contains the error
          return <MyErrorComponent message={data.message} />
        }
      }
    }
)

我找到了这个,但它不能解决我的问题,我想要一个挂起状态的自定义加载器

推荐答案

您可以使用带有定制加载器的action-toastify,如下所示

import emailjs from "@emailjs/browser";
import { toast } from "react-toastify";
import Loader from "../../components/Loader/Loader";

export const sendEmail = ({
  service_id,
  templete_id,
  values,
  theme,
  setIsloading,
  pubkey
}) => {
  toast.promise(
    emailjs.send(service_id, templete_id, values, pubkey),
    // Here you can add the different massage/icons based on pending, success and error state
    {
      pending: {
        render() {
          return "Resolving promise";
        },
        theme,
     // Here you can add your custom loader
        icon: <Loader />,
      },
      success: {
        render() {
          setIsloading(false);
          return "Promise resolve";
        },
     // When this is true you will see the default icon of react-toastify and you can also add a custom icon like the above <Loader />. 
        icon: true,
      },
      error: {
        render() {
          setIsloading(false);
          return "Something went wrong.";
        },
        icon: true,
      },
    }
  );
};

Reactjs相关问答推荐

如何在Pivot模式下自定义标题?

react 表复选框不对任何操作做出react

无法使用Apollo客户端GraphQL设置Next.js 14

客户端组件中服务器组件的两难境地

同一文件中前端和后端的Nginx配置

Redux工具包-useSelector如何通过Reducer引用InitialState?

为什么React UseEffect挂钩在页面重新加载时运行

滚动视图样式高度没有任何区别

如何清除过滤器搜索的状态

PWA:注册事件侦听器不会被触发

单击按钮不会切换组件(当按钮和组件位于两个单独的文件中时)

React Context API 在 Next.js 中更改路由时获取默认数据

即使配置了 webpack.config.js,html-loader 也不起作用

在 Nextjs13 应用程序目录中呈现从 supabase 获取的数据

改变输入的默认值时出现问题:number react-hook-form

状态链接未传递到路由页面

在复选框中react 检索选中的值

添加 React/Redux 组件模板的 VS Code 扩展

gtag:为什么谷歌分析即使没有被授权也会收集数据

CORS 政策:无访问控制允许来源-AWS 和 Vercel