React Native返回同一屏幕时Context值未更新的解决方法

第一步：确认Context的更新逻辑合规 #

首先要排查chosenMaterial的更新方式——React的Context依赖不可变更新触发组件重渲染。如果直接修改Context中的对象属性（比如chosenMaterial.id = 123），React无法检测到变化，组件自然不会更新。必须通过状态更新函数传入新对象：

// 正确的更新写法
setChosenMaterial(prev => ({ ...prev, id: 123, name: '新材料' }));

第二步：用useFocusEffect监听屏幕获焦 #

如果Context更新逻辑没问题，但从材料库返回Overview Screen后组件没自动刷新，就用React Navigation的useFocusEffect钩子，在屏幕获焦时主动同步最新的Context值：

import { useFocusEffect } from '@react-navigation/native';
import { useContext, useState, useCallback } from 'react';
import { ChosenMaterialContext } from '../path/to/your/context';

export default function OverviewScreen() {
  const chosenMaterial = useContext(ChosenMaterialContext);
  // 用本地状态同步Context值，确保获焦时更新
  const [currentMaterial, setCurrentMaterial] = useState(chosenMaterial);

  useFocusEffect(
    useCallback(() => {
      // 屏幕获焦时，从Context拉取最新值更新本地状态
      setCurrentMaterial(chosenMaterial);
    }, [chosenMaterial])
  );

  return (
    <View>
      {currentMaterial ? (
        <Text>当前选中材料：{currentMaterial.name}</Text>
      ) : (
        <Text>请选择材料</Text>
      )}
    </View>
  );
}

如果不想用本地状态，也可以实现一个轻量的强制重渲染（但不如同步状态优雅）：

const [, forceUpdate] = useState(0);

useFocusEffect(
  useCallback(() => {
    // 触发重渲染，让组件读取最新Context值
    forceUpdate(prev => prev + 1);
  }, [])
);

第三步：检查Context订阅层级 #

确保Overview Screen直接被Context Provider包裹，且没有在父组件中把Context值缓存后通过props传递——如果是props传值，父组件不更新的话，子组件拿不到新值。必须在Overview Screen内部直接调用useContext获取最新值。

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