为什么 React Toastify 是显示 HTML 文本

Question

我正在做一个 React 项目，我使用了 React toastify 组件。当我调用 toast 时，它确实出现在屏幕右上角的确切位置以及我希望它出现的方式。

但是！在我为调用 toast 编写的代码所在的位置出现了一些文本。我希望我说得通。让我举例说明。

如您所见，toast 显示正确，但我的表单顶部有一些文本。

return (
   <div>
       <ToastContainer />

       {success && toast.success(successMessage)}
       {error && toast.error(errorMessage)}

       {signupForm()}
   </div>
)

而且这段文字似乎与我的代码（调用 toast 的位置）完全相关。也许我在这里遗漏了一些非常愚蠢的东西。但我需要帮助

Answer 1

我终于找到了我自己问题的答案。我只是 post 在这里以防其他人运行遇到同样的问题。

我犯了一个可怕的错误，就是在实际组件的 return 中调用 toasts。我应该做的是，按照我的逻辑来祝酒。

当我在 return 我的组件中调用 toast 时，toast 成为我组件的一部分。并显示 toast 的 ID。

例如...

        apiCall().then(response => {
            if (response.error) {
                toast.dismiss();
                toast.error(response.error);
            } else {
                toast.dismiss();
                toast.success(response.message);
            }

        });

正如您从我的代码中看到的那样，当我遇到错误或成功时，我会立即在我的逻辑中调用 toasts。

为什么 React Toastify 是显示 HTML 文本

Why is React Toastify is Display HTML text

toast

reactjs

next.js

react-component