React子组件中Context始终为undefined的问题排查求助

核心问题分析 #

你的代码存在几个关键错误，导致 Context 无法正常传递：

1. App 组件未初始化 state
   componentDidMount 是组件挂载后才执行的方法，初始渲染时 this.state 是 undefined，Provider 一开始传递的值就是 undefined，虽然后续会更新，但会导致子组件初始获取 Context 时出错。

2. Toolbar 组件未关联 AppContext
   类组件要获取 Context，要么通过 static contextType = AppContext 声明关联，要么使用 Consumer。你的 Toolbar 既没声明 contextType，使用 Consumer 时也可能因为 AppContext 未正确引入而报错。

3. 导出对象错误
   你最后导出的是 Toolbar 而非 App 组件，这意味着实际渲染的可能只是 Toolbar，根本没用到 App 里的 Provider，自然获取不到 Context。

修复后的完整代码 #

import React from 'react';

const AppContext = React.createContext({});

class App extends React.Component {
  // 初始化 state，避免初始渲染时 this.state 为 undefined
  state = {
    User: {
      Username: "Guest",
      UserType: {
        Description: "Guest"
      }
    }
  };

  // 如果需要从接口异步获取用户信息，保留以下代码；否则可直接使用上面的初始 state
  // componentDidMount() {
  //   this.setState({
  //     User: {
  //       Username: "Guest",
  //       UserType: {
  //         Description: "Guest"
  //       }
  //     }
  //   });
  // }

  render() {
    return (
      <div className="App">
        <AppContext.Provider value={this.state}>
          <Toolbar />
          <h3>{this.state.User.Username}</h3>
        </AppContext.Provider>
      </div>
    );
  }
}

class Toolbar extends React.Component {
  // 声明 contextType，关联 AppContext
  static contextType = AppContext;

  render() {
    return (
      <header className="toolbar">
        <h3>{this.context.User.Username}</h3>
      </header>
    );
  }
}

// 导出 App 组件，而非 Toolbar
export default App;

使用 Consumer 的替代方案 #

如果想用 Consumer 方式获取 Context，确保 Toolbar 能访问到 AppContext，修改 Toolbar 代码如下：

class Toolbar extends React.Component {
  render() {
    return (
      <header className="toolbar">
        <AppContext.Consumer>
          {(value) => (
            <h3>Inside consumer: {value.User.Username}</h3>
          )}
        </AppContext.Consumer>
      </header>
    );
  }
}

额外提示 #

• 确保你的 React 版本在 16.3 及以上（Context API 从该版本开始正式支持）。
• 如果是函数组件，使用 useContext Hook 会更简洁：

function Toolbar() {
  const context = React.useContext(AppContext);
  return <header className="toolbar"><h3>{context.User.Username}</h3></header>;
}

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