ReactJS切换路由返回时如何避免useEffect重复触发后端消息展示

问题根源 #

现有逻辑完全把selector.response存在当作“可以弹消息”的判断条件，本质混淆了两个场景：

• 本次请求刚拿到新的响应，需要弹消息
• 路由切回当前页面，组件重新挂载，store里之前存的旧响应还在，触发effect重新执行
  只要store里的response值没有被消费标记，哪怕组件已经卸载过再挂载，只要读到这个带message的旧值，就会重复弹出通知。

可落地的实现方案 #

方案1：本地状态做消息去重（轻量改动，适合不涉及复杂redux逻辑的场景） #

用useRef记录上一次已经展示过的消息内容，只有当新的响应消息和之前展示过的不一样时，才触发弹窗，避免同一条消息重复展示。
示例代码：

import { useRef, useEffect } from 'react';

function CurrentPage() {
  const selector = useSelector(state => state.yourModule);
  // 记录已经展示过的消息内容
  const shownMessageCache = useRef('');

  useEffect(() => {
    const currentMessage = selector.response?.message;
    // 仅当消息存在、且不是之前已经展示过的内容时才弹窗
    if (currentMessage && shownMessageCache.current !== currentMessage) {
      shownMessageCache.current = currentMessage;
      console.log(selector);
      message.success(currentMessage, 2);
      setLoading(false);
    }
    console.log('render');
  }, [selector.response]);

  // ... 页面其他逻辑
}

注意：如果你的路由是切走就销毁组件的模式，这个方案需要配合把缓存存在会话级存储里，不然组件卸载时ref会被清空，回到页面时还是会把缓存的旧消息重新弹一次。

方案2：Redux层加消息消费标记（最可靠，适合中大型项目） #

不要直接把原始响应当判断依据，给响应对象加consumed标记，只要弹窗逻辑执行过一次，就修改这个标记为“已消费”，后续不管组件怎么重新挂载，看到已消费的状态直接跳过弹窗。

1. Reducer层改造：

// 模块初始值
const initialState = {
  response: null
}

// 处理请求成功的action
case FETCH_DATA_SUCCESS:
  return {
    ...state,
    response: {
      ...action.payload,
      consumed: false // 新增标记：新返回的消息默认待展示
    }
  }

// 新增独立action，用来标记消息已经被展示
case MARK_MESSAGE_AS_CONSUMED:
  return {
    ...state,
    response: {
      ...state.response,
      consumed: true
    }
  }

2. 组件内effect改造：

useEffect(() => {
  const currentResponse = selector.response;
  // 只处理未被消费的消息
  if (currentResponse?.message && !currentResponse.consumed) {
    console.log(currentResponse);
    message.success(currentResponse.message, 2);
    // 触发action修改标记，持久存在store里，不会因为组件卸载丢失
    dispatch(markMessageAsConsumed());
    setLoading(false);
  }
  console.log('render');
}, [selector.response, dispatch]);

这个方案的可靠性最高，因为消费标记是存在全局store里的，和组件的挂载状态完全解耦，不管路由切多少次都不会重复弹同一条消息。

方案3：把临时消息和持久store隔离（适合需要严格控制消息生命周期的场景） #

不要把请求成功的临时提示消息存在全局store里，改成临时存储：

• 请求成功拿到消息时，把内容存在sessionStorage里
• 弹窗逻辑执行完立刻从sessionStorage删掉
• 路由切走再回来时，因为存储里已经没有这条临时消息，自然不会触发重复弹窗
  示例代码：

// 请求发起的位置，拿到响应后存临时存储
const res = await fetchYourDataAPI();
dispatch(fetchDataSuccess(res));
// 存临时消息
sessionStorage.setItem('temp_success_tip', res.message);

// effect里读取
useEffect(() => {
  const tempTip = sessionStorage.getItem('temp_success_tip');
  if (tempTip) {
    message.success(tempTip, 2);
    // 读完立刻删除，下次进来就读不到了
    sessionStorage.removeItem('temp_success_tip');
    setLoading(false);
  }
}, [selector.response]);

常见坑点提醒 #

• 不要把setLoading(false)的逻辑和弹窗逻辑耦合在一起，这个状态应该跟着请求本身的流程走，不要绑定在消息弹窗的判断里，避免因为消息不触发导致loading一直卡住。
• 不要依赖“组件挂载次数”做判断（比如写if (mountedRef.current)），因为路由切换的行为受路由实现、keep-alive配置影响很大，这类判断的可靠性很差。

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