页面刷新/进入时Toast弹窗异常触发问题求助

一、必填项校验Toast异常触发原因 #

第一个useEffect的逻辑是当exchange、currency、currency_symbol都为空时弹出提示，但页面初始加载时，这些表单字段的初始值大概率是空字符串或undefined，刚好满足!exchange && !currency && !currency_symbol的条件，所以组件挂载/页面刷新时就会触发Toast。

另外，这个useEffect的依赖数组里加入了customer，意味着customer状态变化时也会触发校验逻辑——这完全没必要，因为必填项校验只应该在用户点击Create按钮时执行，而非自动监听状态变化触发。

二、错误/成功Toast异常触发可能的原因 #

第二个useEffect存在三个问题：

• 初始状态值错误：如果customerSlice的initialState里isError或isSuccess初始值不是false，组件挂载时就会直接触发对应的Toast。
• reset时机不合理：dispatch(reset())放在useEffect末尾，会在每次依赖项变化时立即重置状态，但如果初始状态下isError/isSuccess为true，会先弹出Toast再重置，页面加载时就会误触发。
• 依赖数组冗余：依赖项包含customer和isLoading，页面加载时（比如执行getAllCustomers请求）这两个状态会发生变化，导致useEffect重复执行，可能误触发Toast。

修复方案 #

针对必填项校验Toast #

移除自动监听的useEffect，把校验逻辑移到Create Customer按钮的点击事件处理函数中，仅在用户主动点击按钮时检查必填项：

const handleCreateCustomer = () => {
  // 注：原逻辑是三个字段都为空才提示，通常必填项是只要有一个为空就提示，按需调整
  if (!exchange || !currency || !currency_symbol) {
    toast({
      title: 'Incomplete form.',
      description: 'Please fill the required fields',
      status: 'error',
      position: 'top-right',
      duration: 3000,
      isClosable: true,
    });
    return; // 阻止后续创建请求执行
  }
  // 执行创建客户的逻辑，例如 dispatch(createCustomer(...))
};

针对错误/成功Toast #

1. 修正初始状态：在customerSlice的initialState中明确设置：

   const initialState = {
     isLoading: false,
     isSuccess: false,
     isError: false,
     message: "",
     // 其他状态字段...
   };
   

2. 调整useEffect逻辑：仅在请求触发的状态变化时弹出Toast，避免初始加载触发：

   const prevIsError = useRef(false);
   const prevIsSuccess = useRef(false);
   
   useEffect(() => {
     // 仅当isError从false变为true时触发
     if (isError && !prevIsError.current) {
       toast({
         title: 'Something went wrong.',
         status: 'error',
         position: 'top-right',
         duration: 3000,
         isClosable: true,
       });
       dispatch(reset());
     }
     // 仅当isSuccess从false变为true时触发
     if (isSuccess && !prevIsSuccess.current) {
       toast({
         title: 'Customer created.',
         description: "Please refresh the table.",
         status: 'success',
         position: 'top-right',
         duration: 3000,
         isClosable: true,
       });
       dispatch(reset());
     }
     // 更新状态记录
     prevIsError.current = isError;
     prevIsSuccess.current = isSuccess;
   }, [isError, isSuccess, dispatch]);
   

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