React Native中useEffect钩子在navigation.goBack返回页面后未触发的问题咨询

咱们直接拆解你遇到的核心问题：返回页面后useEffect不再触发，背后其实藏着Redux状态更新的不规范，以及React Navigation场景下的组件生命周期特性问题，一步步来解决：

1. 先解决Redux状态更新的Immutable问题 #

你当前修改Redux数据的方式是直接修改原数组/对象：

diary.growDimens = growDimens;
diary.lightingType = lightingType;
diary.lumens = lumens;
diaryData[diaryIndex] = diary;
dispatch(diaryFetchSuccess(diaryData));

这属于直接修改原引用（mutate），Redux依赖状态的引用变化来触发组件重新渲染——你传递的还是原来的diaryData数组引用，Redux会认为状态没变化，自然不会触发组件更新，useEffect也就不会重新执行。

修复方式：保持Immutable更新，生成新引用 #

// 复制原数组，避免修改原引用
const updatedDiaryData = [...diaryData];
// 复制要修改的diary对象，同样避免直接修改原数据
const updatedDiary = {
  ...updatedDiaryData[diaryIndex],
  growDimens,
  lightingType,
  lumens
};
updatedDiaryData[diaryIndex] = updatedDiary;
dispatch(diaryFetchSuccess(updatedDiaryData));

这样每次更新都会生成新的数组和对象引用，Redux能正确检测到状态变化，触发组件重新渲染。

2. 给useEffect配置正确的依赖数组 #

你的useEffect没有设置依赖数组，默认会每次组件渲染都执行，但如果组件没因为状态变化重新渲染，它就不会触发。所以必须把useEffect依赖的变量加进去：

useEffect(() => {
    console.log('im here');
    loadDiary();
}, [diaryData, diaryIndex]); // 依赖Redux中的这两个状态，变化时自动触发

这样当diaryData或diaryIndex更新时，useEffect就会重新执行。

3. 适配React Navigation的页面焦点监听 #

如果返回页面时Redux状态没有变化，但你需要强制触发loadDiary，就得监听React Navigation的focus事件——因为goBack返回时组件可能已经处于mounted状态，不会触发组件重新mount：

useEffect(() => {
    // 首次加载执行一次
    loadDiary();
    // 监听页面获得焦点的事件
    const unsubscribe = navigation.addListener('focus', () => {
        loadDiary();
    });
    // 组件卸载时取消监听，避免内存泄漏
    return unsubscribe;
}, [diaryData, diaryIndex, navigation]);

这样不管是Redux状态变化，还是页面重新获得焦点，都会触发loadDiary函数。

4. 优化状态冗余问题 #

你当前用useState维护了diary状态，但其实可以直接依赖Redux的计算值，避免状态同步的麻烦：

// 去掉额外的useState，直接使用Redux中的实时计算值
const diary = diaryData[diaryIndex];

这样就不需要维护setDiary，直接用Redux的状态即可，减少不必要的状态冗余。

内容的提问来源于stack exchange，提问作者Flávio Costa