// ¿Cómo puedo usar la promesa de brindar como si quisiera mostrar la ruleta mientras obtengo datos y luego enviar un mensaje de éxito o error?
// pero recibo un error en el siguiente código
const fetch = () => { axios .get("https://restcountries.com/v2/name/india") .then((res) => { toast.promise({ pending:"pending", success:"success", error:"rejected" } ) console.log(res); }) .catch((err) => { toast.error("🦄 failed", { position: "top-center", autoClose: 2000, hideProgressBar: true, closeOnClick: true, pauseOnHover: true, draggable: true, progress: undefined }); }); };De acuerdo con la API de brindis https://fkhadra.github.io/react-toastify/promise/ la sintaxis debe ser
const myPromise = fetchData(); toast.promise(myPromise, { loading: 'Loading', success: 'Got the data', error: 'Error when fetching', })Un ejemplo que se puede encontrar en https://codesandbox.io/s/twilight-bash-jzs24y?file=/src/App.js
export default function App() { const myPromise = new Promise((resolve) => fetch("https://jsonplaceholder.typicode.com/todos/1") .then((response) => response.json()) .then((json) => setTimeout(() => resolve(json), 3000)) // setTimeout just for the example , cause it will load quickly without it . ); useEffect(() => { toast.promise(myPromise, { pending: "Promise is pending", success: "Promise Loaded", error: "error" }); }, []); return ( <div className="App"> <ToastContainer /> </div> ); }Si no está utilizando la promesa. Utilice toast.loading . (DOCUMENTOS: https://fkhadra.github.io/react-toastify/promise/#toastloading )
const getData = () => { const id = toast.loading("Please wait...") axios.get(`some-url`) .then(res => { toast.update(id, {render: "All is good", type: "success", isLoading: false}); }).catch(err => { toast.update(id, {render: "Something went wrong", type: "error", isLoading: false }); }); }