React中TestScreen组件this.context为空，Context API问题求助

嘿，我一眼就发现你代码里的问题啦！你在TestScreen组件里把static contextType赋值给了AppProvider组件，但实际上**contextType需要指向的是通过React.createContext()创建的那个Context对象**，也就是你在store.js里导出的AppContext。

修正后的test.js代码： #

import { AppContext, AppConsumer } from './store'; // 确保正确导入AppContext

export default class TestScreen extends React.Component { 
  static contextType= AppContext; // 这里改成AppContext，而非AppProvider！
  componentDidMount() { 
    console.log('test',this.context); // 现在应该能正常拿到{ favoriteAnimal: "cow" }了
  } 
  render() { 
    return ( 
      <AppConsumer> 
        { (context) => ( 
          <p>{context.favoriteAnimal}</p> 
        )} 
      </AppConsumer> 
    ) 
  } 
}

问题原因说明： #

React.Component.contextType的作用是让类组件通过this.context访问上下文值，但它的赋值必须是React.createContext()返回的Context对象，而不是Context的Provider组件。你之前把它指向了AppProvider组件，React无法识别这个类型，自然就返回空对象了。

另外再确认下：你的TestScreen组件确实被AppProvider包裹（从你用Consumer能正常取值来看，这一步应该没问题），这是contextType生效的必要前提哦。

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