为何同时作为状态变量的Context变量经useState更新后未触发界面重渲染？

我来帮你拆解下你遇到的问题——其实不是Context不触发重渲染，而是代码里有几个容易踩的坑，导致状态更新后界面没跟上：

• 第一个大坑：无依赖的useEffect每次渲染都“还原”状态
  你在HomeScreen里写的useEffect没有加依赖数组，这意味着每次组件渲染（包括状态更新后的重渲染）都会执行这个useEffect。里面的逻辑是从storage读取旧值然后覆盖config状态，这就导致：你刚点击按钮修改完config，组件一重渲染，useEffect又跑一遍把storage里的旧值塞回去，相当于你的修改直接被“撤销”了，界面自然看不到变化。

  解决方法很简单：给useEffect加上空依赖数组[]，让它只在组件首次挂载时执行一次，负责初始化状态，之后就不再干扰后续的状态更新。

• 第二个问题：状态更新依赖旧快照，导致更新丢失或覆盖
  不管是useEffect里的两次setConfig，还是按钮点击事件里的setConfig({...config, ...})，都是基于当前渲染周期里的config旧快照来更新的。比如你连续两次调用：

  setConfig({ ...config, trackingAsked: askedBoolean });
  setConfig({ ...config, trackingAllowed: allowedBoolean });
  

  这里的config是同一个旧值，第二次更新会完全覆盖第一次的修改，最终只有trackingAllowed的变化生效。

  更稳妥的方式是使用函数式更新，让React基于最新的状态来更新：

  setConfig(prevConfig => ({
    ...prevConfig,
    trackingAsked: askedBoolean,
    trackingAllowed: allowedBoolean
  }));
  

  按钮点击事件里的更新也一样，比如disableTracking里应该写成：

  setConfig(prev => ({
    ...prev,
    trackingAsked: true,
    trackingAllowed: false
  }));
  

  这样就不会因为闭包捕获旧的config导致更新丢失了。

• 额外的小问题：Hooks调用顺序违规
  看你贴的HomeScreen代码，useEffect写在了useContext调用之前，这其实违反了React Hooks的规则——所有Hooks必须在组件的最顶层按顺序调用，不能在其他Hooks之后或者条件语句里。虽然没直接导致当前问题，但很容易引发其他奇怪的bug，建议把const { config, setConfig } = useContext(ConfigContext);移到所有Hooks的最前面，确保调用顺序正确。

修复后的关键代码示例：

export function HomeScreen() {
  // 先获取Context，保证Hooks顺序正确
  const { config, setConfig } = useContext(ConfigContext);

  useEffect(() => {
    async function prepare() {
      let askedBoolean = false;
      let allowedBoolean = true;
      try {
        const asked = await retrieveData('TrackingAsked');
        askedBoolean = asked === 'true';
      } catch {
        askedBoolean = false;
      }
      try {
        const allowed = await retrieveData('TrackingAllowed');
        allowedBoolean = allowed === 'true';
      } catch {
        allowedBoolean = true;
      }
      // 合并成一次函数式更新
      setConfig(prev => ({
        ...prev,
        trackingAsked: askedBoolean,
        trackingAllowed: allowedBoolean
      }));
    }
    prepare();
  }, []); // 空依赖数组，仅初始化时执行

  const disableTracking = async () => {
    await storeData('TrackingAsked', 'true');
    await storeData('TrackingAllowed', 'false');
    // 函数式更新确保基于最新状态
    setConfig(prev => ({
      ...prev,
      trackingAsked: true,
      trackingAllowed: false
    }));
  };

  // 其他按钮事件同理修改...

  return (
    // 你的JSX代码
  );
}

内容来源于stack exchange