React中Context值无法更新问题排查求助（附代码）

我使用React的Context API开发了一个基于全局状态管理的计数器应用，但点击增加和减少按钮时，全局状态值无法更新。以下是相关代码及问题排查：

原代码展示 #

Context文件（Context/dataContext.js） #

import {createContext,useState} from 'react';

export const DataContext = createContext({
    data:0,
    increase : () => {},
    decrease : () => {}
});

function DataContextProvider(props){
    const [data,setData] = useState();

    const increase = () => {
        setData(data + 1);
    }

    const decrease = () => {
        setData(data - 1);
    }

    return(
        <DataContext.Provider value={{data,increase,decrease}}>
            {props.children}
        </DataContext.Provider>
    );
};

export default DataContextProvider;

App.js #

import React,{useContext} from 'react';
import {DataContext} from './Context/dataContext';
import DataContextProvider from './Context/dataContext';
import IncreaseBtn from './Component/Increase';
import DecreaseBtn from './Component/Decrease';

const App = () => {
  const {data} = useContext(DataContext);
  
  return(
    <>
    <DataContextProvider>
      {data}
      <br/>
      <br/>
      <IncreaseBtn />
      <br/>
      <br/>
      <DecreaseBtn />
    </DataContextProvider>
    </>
  )
}

export default App;

增加按钮组件（Component/Increase.js） #

import React,{useContext} from 'react';
import {DataContext} from '../Context/dataContext';

const IncreaseBtn = () => {
    const {increase} = useContext(DataContext);

    return(
        <>
            <button onClick={increase}> Increase </button>
        </>
    )
}

export default IncreaseBtn;

减少按钮组件（Component/Decrease.js） #

import React,{useContext} from 'react';
import {DataContext} from '../Context/dataContext';

const DecreaseBtn = () => {
    const {decrease} = useContext(DataContext);

    return(
        <>
            <button onClick={decrease}> Decrease </button>
        </>
    )
}

export default DecreaseBtn;

文件夹结构 #

问题分析 #

1. useContext调用位置错误：App组件中直接在DataContextProvider外部调用useContext(DataContext)，此时拿到的是Context的默认值（{data:0, ...}），而非Provider提供的动态状态。Provider的上下文仅对其内部的子孙组件生效，外部组件无法感知状态变化。

2. useState未初始化默认值：const [data,setData] = useState();中data初始值为undefined，执行data + 1会得到NaN，后续所有状态更新都会失效。

3. 状态更新存在闭包陷阱：直接使用setData(data + 1)依赖当前渲染周期的data值，若多次快速点击或异步操作时，可能导致状态更新不及时。

修复方案 #

1. 修复Context文件 #

给useState设置初始值0，并使用函数式更新避免闭包问题：

import {createContext,useState} from 'react';

export const DataContext = createContext({
    data:0,
    increase : () => {},
    decrease : () => {}
});

function DataContextProvider(props){
    // 初始化data为0
    const [data,setData] = useState(0);

    // 函数式更新，基于上一次状态计算新值
    const increase = () => {
        setData(prevData => prevData + 1);
    }

    const decrease = () => {
        setData(prevData => prevData - 1);
    }

    return(
        <DataContext.Provider value={{data,increase,decrease}}>
            {props.children}
        </DataContext.Provider>
    );
};

export default DataContextProvider;

2. 修复App.js #

将状态展示逻辑移到Provider内部的子组件中，确保useContext在Provider范围内调用：

import React from 'react';
import DataContextProvider from './Context/dataContext';
import {DataContext} from './Context/dataContext';
import IncreaseBtn from './Component/Increase';
import DecreaseBtn from './Component/Decrease';

// 内部组件，用于显示计数器数值
const CounterDisplay = () => {
  const {data} = React.useContext(DataContext);
  return <span>{data}</span>;
};

const App = () => {
  return(
    <DataContextProvider>
      <CounterDisplay />
      <br/>
      <br/>
      <IncreaseBtn />
      <br/>
      <br/>
      <DecreaseBtn />
    </DataContextProvider>
  )
}

export default App;

修复后效果 #

点击增减按钮时，计数器数值会正常更新，状态变化能正确传递到所有使用Context的组件中。

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