useContext返回初始值而非传入值，该如何解决？

你的问题核心是App组件没有被userprop.Provider包裹——虽然你在Context组件里写了Provider包裹App，但如果项目入口是直接渲染App，那App就不在Provider的上下文范围内，自然只能拿到createContext(0)的初始值。

具体解决步骤： #

修改项目的入口文件（一般是index.js），把原来渲染App的代码改成渲染Context组件：

原来的index.js可能是这样：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

改成：

import React from 'react';
import ReactDOM from 'react-dom/client';
import Context from './Context'; // 导入Context组件

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Context /> // 渲染Context组件，而非App
  </React.StrictMode>
);

原理说明： #

只有当组件处于Context Provider的包裹层级内时，useContext才能获取到Provider传入的value值。你在Context组件里已经把App放在Provider里了，但入口没渲染这个Context组件，导致App根本没进入这个上下文环境，所以只能拿到初始的0。

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