如何通过React Context全局获取Map对象最新值？及更新异常求助

问题根源 #

你遇到的问题核心是直接修改了state对象的原有属性，未创建新的对象引用：

• 对于temp这类值类型变量，更新时直接返回新值，React能检测到变化，所以Context能正常同步更新；
• 对于data这类引用类型变量，你修改了原有对象的value属性后直接返回原对象，React依赖引用变化判断state更新，因此无法识别到data的变化，导致Context中的data不会触发组件重新渲染。

修复方案 #

更新data时必须返回全新的对象，而不是修改原对象。具体修改如下：

错误代码（导致data不更新） #

const handleClick = () => {
  setData(data => {
    data.value += 1;
    return data;
  });
  setTemp(temp => temp + 1);
};

修正后的代码 #

const handleClick = () => {
  // 解构原对象，创建新对象并更新value属性
  setData(prevData => ({ ...prevData, value: prevData.value + 1 }));
  setTemp(temp => temp + 1);
};

原理说明 #

React的state遵循不可变原则：直接修改原有引用类型的属性不会触发重新渲染，必须通过创建新的对象/数组引用，让React识别到state发生了变化，才能同步更新Context并通知订阅的组件重新读取最新值。

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