React-Toastify弹窗提前触发及Redux RTK异步请求错误提示异常问题排查

让我们一步步拆解你遇到的问题，逐个解决：

问题1：按钮点击前toast就提前显示 #

你写的按钮代码是：

<button onClick={notify(error)}>Submit</button>

这里的核心问题是你直接执行了notify(error)，而不是传递一个点击时才会触发的函数引用。组件渲染阶段这个函数就会被调用，所以toast会毫无预兆地提前弹出来。

修正方法：把onClick改成回调函数，确保只有点击动作发生时才执行notify：

<button onClick={() => notify(error)}>Submit</button>

问题2：useEffect触发toast时的异常（第一次空白弹窗、第二次才正常） #

你后来改用useEffect直接触发toast的写法，存在两个关键问题：

2.1 缺少依赖数组导致重复执行 #

你的代码是：

useEffect(() => {
  if(isError){
    toast(emessage.data.errors)
  }
})

没有依赖数组的useEffect会在组件每次渲染时都执行——包括初始渲染、state变化、props变化等。当第一次报错时，组件可能会因为状态更新触发多次渲染，导致toast被重复调用，弹出多个空白弹窗。

解决：加上精准的依赖数组，只在isError和emessage变化时执行：

useEffect(() => {
  if(isError){
    toast(emessage.data.errors)
  }
}, [isError, emessage]) // 依赖数组，控制触发时机

2.2 错误信息未正确处理导致空白弹窗 #

第一次弹出空白弹窗，大概率是因为emessage.data.errors在isError变为true时还没被正确赋值，或者它的结构不是可直接显示的字符串（比如是数组、嵌套对象），直接传给toast就会显示空白。

你需要根据错误的实际结构提取可显示的文本，比如如果errors是包含多个错误的数组：

useEffect(() => {
  // 用可选链防止未定义报错，同时判断错误是否存在
  if(isError && emessage?.data?.errors){
    // 提取错误文本，根据你的接口返回结构调整
    const errorText = Array.isArray(emessage.data.errors) 
      ? emessage.data.errors[0].message // 取第一个错误的文本
      : emessage.data.errors; // 如果是字符串直接使用
    toast.error(errorText);
  }
}, [isError, emessage])

额外提示：RTK Mutation的错误变量名 #

注意RTK的useMutation返回的错误字段默认是error，而不是emessage。如果你是自己重命名了这个字段那没问题；如果是笔误写错了，会导致emessage为undefined，自然弹出空白弹窗。确认一下你的useLoginUserMutation定义：

// 官方RTK返回值的错误字段是error
const [loginUser, {data, isError, error}] = useLoginUserMutation();
// 后续在useEffect里用error.data.errors

整合后的修正代码示例 #

import { useState, useEffect } from 'react';
import { toast } from 'react-toastify';
import { useLoginUserMutation } from './your-api-slice-path';

const YourComponent = () => {
  const [loginUser, { data, isError, error }] = useLoginUserMutation();
  const [errorMsg, setErrorMsg] = useState('');

  // 监听错误并更新状态/触发toast
  useEffect(() => {
    if (isError && error?.data?.errors) {
      // 根据实际接口返回的错误结构调整文本提取逻辑
      const displayText = Array.isArray(error.data.errors) 
        ? error.data.errors.map(err => err.message).join(', ') // 多个错误用逗号分隔
        : error.data.errors;
      setErrorMsg(displayText);
      // 如果需要自动弹出toast，取消下面的注释；如果需要点击按钮才显示，保留按钮回调即可
      // toast.error(displayText);
    }
  }, [isError, error]);

  const notify = (msg) => {
    if (msg) toast.error(msg); // 空消息不触发toast
  };

  return (
    <div>
      <button onClick={() => notify(errorMsg)}>Submit</button>
    </div>
  );
};

export default YourComponent;

这样应该就能解决你遇到的提前显示、空白弹窗、重复弹窗的问题了。

内容的提问来源于stack exchange，提问作者Rajanboy