React使用Context API管理状态时UI未同步更新问题求助

我是React新手，用Context API管理全局状态，做了两个带按钮的组件。点击按钮时控制台状态值能正常更新，但UI没同步更新。点击Increment按钮时日志值变了，但UI没动，希望只用Context API解决。

相关代码 #

App.jsx #

import { useContext} from "react"
import Component1 from "./Component1"
import Component2 from "./Component2"
import { CounterContext } from "./CounterContext"
import CounterContextProvider from "./CounterContext"

function App() {
  const context = useContext(CounterContext)
  return <CounterContextProvider>
    <h1>Counter Value: {context.counterValue}</h1>
    <Component1/>
    <Component2/>
    </CounterContextProvider>
  }
  export default App

Component1.jsx #

import { useContext } from "react"
import { CounterContext } from "./CounterContext"
export default function Component1() {
   const context = useContext(CounterContext);
   return <>
     <h1>Component 1</h1>
     <button onClick={context.handleIncrement}>Increment</button>
   </>
}

Component2.jsx #

import { useContext } from "react"
import { CounterContext } from "./CounterContext"
export default function Component2() {
   const context = useContext(CounterContext);
   return <>
    <h1>Component 2</h1>
    <button onClick={context.handleDecrement}>Decrement</button>
   </>
 }

CounterContext.jsx #

import { createContext, useContext, useState } from "react";

export const CounterContext = createContext({
    counterValue: 10,
    handleIncrement: () => {},
    handleDecrement: () => {}
});

export default function CounterContextProvider({children}) {
   const context =useContext(CounterContext);
   const [counterState, setCounterState] = useState({counterValue: 10})
   
   function incrementValue() {
      console.log(counterState)
      let copiedObject = {...counterState}
      copiedObject.counterValue = copiedObject.counterValue + 1;
      setCounterState({...copiedObject})
   }

   function decrementValue() {
      let copiedObject = {...counterState}
      copiedObject.counterValue = copiedObject.counterValue - 1;
      setCounterState({...copiedObject})
   }

   let ctxValue = {
     counterValue: counterState.counterValue,
     handleIncrement: incrementValue,
     handleDecrement: decrementValue
   }

   return (
      <CounterContext.Provider value={ctxValue}>
          {children}
      </CounterContext.Provider>
   )
}

问题原因及修复方案 #

核心问题 #

App组件中useContext(CounterContext)的调用位置错误——它在CounterContextProvider外部，所以拿到的始终是Context的默认值，而非Provider提供的动态更新值。只有Provider内部的组件才能获取到最新的Context值，App组件现在在Provider外面，自然不会响应状态变化。另外，CounterContextProvider内部调用useContext(CounterContext)是多余的，直接移除即可。

修复步骤 #

1. 调整Context使用位置：把获取Context的逻辑移到Provider内部的组件中，比如拆分一个专门展示计数器的子组件：

修改后的App.jsx：

import Component1 from "./Component1"
import Component2 from "./Component2"
import CounterContextProvider from "./CounterContext"
import CounterDisplay from "./CounterDisplay"

function App() {
  return (
    <CounterContextProvider>
      <CounterDisplay />
      <Component1/>
      <Component2/>
    </CounterContextProvider>
  )
}

export default App

新增CounterDisplay.jsx：

import { useContext } from "react"
import { CounterContext } from "./CounterContext"

export default function CounterDisplay() {
  const context = useContext(CounterContext)
  return <h1>Counter Value: {context.counterValue}</h1>
}

2. 移除Provider中多余的useContext调用：

修改后的CounterContext.jsx：

import { createContext, useState } from "react";

export const CounterContext = createContext({
    counterValue: 10,
    handleIncrement: () => {},
    handleDecrement: () => {}
});

export default function CounterContextProvider({children}) {
   const [counterState, setCounterState] = useState({counterValue: 10})
   
   function incrementValue() {
      let copiedObject = {...counterState}
      copiedObject.counterValue = copiedObject.counterValue + 1;
      setCounterState(copiedObject)
   }

   function decrementValue() {
      let copiedObject = {...counterState}
      copiedObject.counterValue = copiedObject.counterValue - 1;
      setCounterState(copiedObject)
   }

   const ctxValue = {
     counterValue: counterState.counterValue,
     handleIncrement: incrementValue,
     handleDecrement: decrementValue
   }

   return (
      <CounterContext.Provider value={ctxValue}>
          {children}
      </CounterContext.Provider>
   )
}

可选优化 #

可以把counterState改成单个值而非对象，减少不必要的对象拷贝，让代码更简洁：

// CounterContext.jsx中修改状态定义和更新逻辑
const [counterValue, setCounterValue] = useState(10)

function incrementValue() {
  setCounterValue(prev => prev + 1)
}

function decrementValue() {
  setCounterValue(prev => prev - 1)
}

const ctxValue = {
  counterValue,
  handleIncrement: incrementValue,
  handleDecrement: decrementValue
}

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