如何监听React中useContext的状态变化 解决子组件数据不更新问题

你当前的写法中，useState(useContext(WeatherContext)) 仅会在组件首次渲染时读取一次Context的值作为本地state的初始值，后续WeatherContext的全局状态更新时，本地的weatherInfo state不会自动同步，就会出现状态不更新的问题。

根据你的使用场景选对应方案即可：

• 如果你不需要在子组件内单独修改weatherInfo，无需额外声明本地state，直接读取Context即可：

const weatherInfo = useContext(WeatherContext)

该写法下只要Context的Provider传递的数值更新，子组件的weatherInfo会自动同步最新状态，不需要额外做监听处理。

• 如果你确实需要在子组件内维护独立的weatherInfo本地副本，同时要同步Context的全局更新，可以通过useEffect监听Context的变化，主动更新本地state：

const contextWeather = useContext(WeatherContext)
const [weatherInfo, setWeatherInfo] = useState(contextWeather)

useEffect(() => {
  setWeatherInfo(contextWeather)
}, [contextWeather])

每次Context的contextWeather值变化时，都会触发useEffect回调更新本地的weatherInfo状态。

• 请确认你的Context更新逻辑符合React的不可变原则：更新Context状态时要返回全新的状态值/引用，不要直接修改原状态对象，否则不会触发消费组件的重渲染。比如Context存储的是对象类型时：

// 正确写法，返回新对象引用，触发重渲染
setWeatherContext(prev => {
  return {...prev, temperature: 26}
})

// 错误写法，修改原对象引用，不会触发重渲染
prevWeather.temperature = 26
setWeatherContext(prevWeather)

• 请确认当前子组件被包裹在对应WeatherContext的Provider组件内部，否则无法接收到Context的状态更新。

内容的提问来源于stack exchange，提问作者Wiktor Maciążek