如何正确修改React Context的值？现有实现不生效问题排查

• 错误1：上下文取值位置错误：你在GlobalContext组件内部直接调用useContext(ColorContext)，此时当前组件还未被自身返回的ColorContext.Provider包裹，只能拿到创建Context时设置的默认空字符串值，无法解构出color和setColor，直接运行会报解构错误。
• 错误2：缺少状态定义：代码中调用的setColor没有被声明，你需要先通过useState定义全局共享的color状态和对应的更新方法setColor，再传递给Provider。
• 错误3：Provider标签闭合错误：你写的<ColorContext.Provider/>是错误的自闭合写法，正确的闭合标签应为</ColorContext.Provider>。
• 错误4：Context默认值类型不匹配：创建ColorContext时默认值是空字符串，但后续Provider传递的是包含color和setColor的对象，类型不一致会导致消费时出现预期外的错误。
• 错误5：Provider作用范围错误：当前你只把button放在Provider内部，其他组件无法消费到这个Context的状态，要作为全局状态使用需要把Provider放在整个应用组件树的最顶层。
• 错误6：语法错误：代码中使用了中文全角引号（“、‘），JS语法要求使用英文半角引号，直接运行会报语法错误。

1. 正确创建Context #

// 初始默认值和后续传递的value结构保持一致
const ColorContext = React.createContext({
  color: '',
  setColor: () => {}
})

2. 实现全局Provider组件 #

function GlobalColorProvider({ children }) {
  // 声明要共享的状态
  const [color, setColor] = React.useState('');

  const toGreen = () => {
    setColor('green');
  };

  return (
    <ColorContext.Provider value={{ color, setColor }}>
      <button onClick={toGreen}>Change Color</button>
      {/* 所有被包裹的子组件都可以消费该Context */}
      {children}
    </ColorContext.Provider>
  )
}

3. 全局注册使用 #

在应用入口文件中将Provider包裹根组件，即可让所有子组件消费该全局状态：

// 以React18之前的写法为例
ReactDOM.render(
  <GlobalColorProvider>
    <App />
  </GlobalColorProvider>,
  document.getElementById('root')
)

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