React Native状态变更后Context绑定的文本未更新问题

核心根因 #

React Context 触发消费组件重渲染的唯一前提是 Provider 传递的value属性的引用发生变化。你当前是直接修改 Context 绑定对象的属性值，没有触发 React 的状态更新流程，因此消费组件不会重渲染，Text 文本自然不会更新。
你在 onPress 回调中能读到最新值，是因为你修改的是同一个引用对象的内部属性，内存中的对象值确实发生了变化，但 React 无法感知到这个变更，不会触发 UI 刷新。

常见的错误实现场景 #

• Context 的值存储在普通 JS 变量中，没有绑定到 Provider 组件的 state。直接修改普通变量的属性不会触发 Provider 的更新，下游组件感知不到值变化。
• 即使 Context 值绑定了 state，更新时直接修改 state 对象的属性，没有调用setState返回一个全新的对象，state 的引用没有变化，Provider 不会向下游通知更新。

正确实现方案 #

1. Provider 侧实现 #

需要将 Context 值存入 Provider 组件的 state，更新时通过 setState 返回新对象触发更新：

import { createContext, useState } from 'react';

const MyContext = createContext();

const MyProvider = ({ children }) => {
  // 将context值存入state
  const [contextValue, setContextValue] = useState({ value: false });

  // 封装更新方法，保证每次更新返回新的对象引用
  const toggleValue = () => {
    setContextValue(prev => ({
      ...prev,
      value: !prev.value
    }));
  };

  return (
    <MyContext.Provider 
      value={{
        ...contextValue,
        toggleValue
      }}
    >
      {children}
    </MyContext.Provider>
  );
};

export { MyContext, MyProvider };

2. 业务组件侧实现 #

直接调用 Context 中封装的更新方法即可：

import { useContext } from 'react';
import { TouchableOpacity, Text } from 'react-native';
import { MyContext } from './MyProvider';

const YourComponent = () => {
  const myContext = useContext(MyContext);

  return (
    <TouchableOpacity
      onPress={() => {
        myContext.toggleValue();
      }}
    >
      <Text>{myContext.value ? 'working' : 'not working'}</Text>
    </TouchableOpacity>
  );
};

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