使用布尔值作为useEffect依赖，切页返回后成功提示重复弹出如何解决？

你将saveProfileSuccess状态存储在了全局Redux store中，该状态不会随页面组件卸载自动重置。当你跳转页面后当前页面组件销毁，再返回时组件重新挂载，useEffect会读取到Redux里仍为true的成功状态，重复触发提示逻辑。

• 方案1：消费成功状态后立即重置全局状态（最推荐）
  先在UserReducer对应的action文件中新增一个重置成功状态的action，示例逻辑：

// 新增重置action
const resetSaveProfileSuccess = () => ({
  type: 'RESET_SAVE_PROFILE_SUCCESS'
})

// UserReducer中添加对应处理逻辑
case 'RESET_SAVE_PROFILE_SUCCESS':
  return {
    ...state,
    saveProfileSuccess: false
  }

修改页面useEffect逻辑，弹出提示后立刻调用重置action：

const saveProfile = (userData) => dispatch(_UpdateProfile(userData));
const saveProfileSuccess = useSelector(state => state.UserReducer.saveProfileSuccess);

useEffect(() => {
  if (saveProfileSuccess) {
    showSuccessMessage("The user profile has been updated successfully.");
    // 其他需要执行的相关操作
    dispatch(resetSaveProfileSuccess()); // 执行完所有逻辑后重置全局状态
  }
}, [saveProfileSuccess, dispatch])

只要成功状态被消费过一次就会被重置为false，后续组件重新挂载也不会重复触发提示。

• 方案2：组件卸载时重置状态
  如果你需要在当前页面停留时保留成功状态做其他逻辑，可以在组件卸载的生命周期中重置状态：

useEffect(() => {
  if (saveProfileSuccess) {
    showSuccessMessage("The user profile has been updated successfully.");
    // 其他需要执行的相关操作
  }
  // 组件卸载时执行重置
  return () => {
    dispatch(resetSaveProfileSuccess());
  }
}, [saveProfileSuccess, dispatch])

• 方案3：新增本地标记避免重复触发（临时修复用）
  如果暂时不想修改Redux逻辑，可以用useRef本地标记记录是否已经弹出过提示，不推荐长期使用：

const hasShownTip = useRef(false);
useEffect(() => {
  if (saveProfileSuccess && !hasShownTip.current) {
    showSuccessMessage("The user profile has been updated successfully.");
    // 其他需要执行的相关操作
    hasShownTip.current = true;
  }
}, [saveProfileSuccess])

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