如何在goBack()点击时更新前页useState值并按需刷新

要实现从ScreenB返回ScreenA时仅在执行特定操作后才条件性刷新，核心是通过Redux标记状态配合页面聚焦事件，同时用完标记后重置，避免重复触发。以下是具体修改步骤：

1. 完善Redux Reducer，添加重置标记的Action #

首先在你的homeReducer中新增重置updateValue的逻辑，确保每次刷新后标记会被清空：

const initialState = {
  updateValue: false
};

const homeReducer = (state = initialState, action) => {
  switch(action.type) {
    case 'UPDATE_HOME_SCREEN':
      return { ...state, updateValue: action.payload };
    // 新增重置标记的Action
    case 'RESET_HOME_SCREEN_UPDATE':
      return { ...state, updateValue: false };
    default:
      return state;
  }
};

2. 修改ScreenA的useEffect逻辑 #

结合页面聚焦状态与Redux标记，仅在两者同时满足时执行刷新，并立即重置标记：

import { useSelector, useDispatch } from 'react-redux';
import { useIsFocused } from '@react-navigation/native';

const ScreenA = ({ navigation }) => {
  const { updateValue } = useSelector(state => state.homeReducer);
  const dispatch = useDispatch();
  const isFocused = useIsFocused();

  useEffect(() => {
    // 仅当页面聚焦且标记为true时执行刷新
    if (isFocused && updateValue) {
      setOffset(1);
      setTotalPages(1);
      setMyChatRooms([]);
      getUserData();
      // 重置标记，避免下次返回重复触发
      dispatch({ type: 'RESET_HOME_SCREEN_UPDATE' });
    }
  }, [isFocused, updateValue, dispatch]); // 必须添加updateValue和dispatch到依赖项

  // 其他代码...
};

替代方案：使用Navigation Focus事件监听 #

如果你更倾向于用导航原生事件而非useIsFocused，可以改成以下写法：

useEffect(() => {
  const unsubscribe = navigation.addListener('focus', () => {
    if (updateValue) {
      setOffset(1);
      setTotalPages(1);
      setMyChatRooms([]);
      getUserData();
      dispatch({ type: 'RESET_HOME_SCREEN_UPDATE' });
    }
  });

  // 组件卸载时移除监听
  return unsubscribe;
}, [updateValue, dispatch]);

3. 保留ScreenB原有逻辑（无需修改） #

ScreenB中leaveGroup的dispatch逻辑保持不变，确保操作成功后标记updateValue为true：

const leaveGroup = () => {
  hideMenu();
  callLikeMindsApi(`URL`, httpMethods.HTTP_PUT)
    .then(response => {
      if (response && response.data && response.data.success) {
        hideMenu();
        dispatch(updateHomeScreen(true));
        props.navigation.goBack();
      }
    })
    .catch(error => {
      Alert.alert('FAILED', error.response.data.error_message);
    });
};

问题根源解释 #

你之前的代码存在两个关键问题：

• useEffect的依赖项未包含updateValue，导致标记变化时无法触发回调；
• 未重置updateValue，会导致每次返回ScreenA时只要标记为true就重复刷新。

通过添加依赖项和重置标记，既能保证仅在需要时刷新，又能避免不必要的重复触发。

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