Блог

Я использую react-toastify для своей формы. в настоящее время я показываю сообщение при ошибке или сообщении об успехе. когда пользователь нажимает снова, мне нужно очистить или скрыть все типы всплывающих уведомлений. пожалуйста, проверьте приведенный ниже код.

Используемая библиотека для тостов https://www.npmjs.com/package/react-toastify

       const addRecord= (form) => {
     toast.hide(); // i need to hide all toast notification 
    const header = {
      Auth_token: `${appUserConfig.accessTokenName}=${appUserConfig.accessToken}`,
      User_name: appUserConfig.userName,
    };
    httpPost(SAVE_INVOICE, data, header)
      .then((response) => {

        if (response.status === 200) {
          toast.success('Successfully Saved', { position: toast.POSITION.TOP_RIGHT })
        }

      })
      .catch((e) => {
        console.log("e:", e);
        toast.error('Something went wrong', { position: toast.POSITION.TOP_RIGHT, autoClose: false })

      });

  }
 

согласно моему требованию, мне нужно сохранить тост с сообщением об ошибке без автоклазии. Поэтому, когда пользователь снова нажимает кнопку «Добавить», мне нужно очистить все уведомления о тостах. Как я это делаю

Возможно, вам захочется проверить его документацию для очистки всех тостов. Вот что я нашел

Ссылка: https://fkhadra.github.io/react-toastify/remove-toast

Чтобы удалить все тосты, используйте:

toast.dismiss();

В вашем контексте поступайте так.

 const addRecord= (form) => {
     toast.dismiss(); // i need to hide all toast notification 
    const header = {
      Auth_token: `${appUserConfig.accessTokenName}=${appUserConfig.accessToken}`,
      User_name: appUserConfig.userName,
    };
    httpPost(SAVE_INVOICE, data, header)
      .then((response) => {

        if (response.status === 200) {
          toast.success('Successfully Saved', { position: toast.POSITION.TOP_RIGHT })
        }

      })
      .catch((e) => {
        console.log("e:", e);
        toast.error('Something went wrong', { position: toast.POSITION.TOP_RIGHT, autoClose: false })

      });

  }