Reactjs 在React组件生命周期方法中，`this.context`是空对象

为什么在这个组件生命周期方法中，

this.context

是一个空对象

上下文在

消费者

中具有该上下文的正确值。只有

this.context

API失败

const LoremContext=React.createContext({
洛雷姆：“ipsum”，
})
类MenuItem扩展了React.Component{
componentDidMount（）{
console.log(
在MenuItem.componentDidMount中，this.context是：“，
本节（上下文）
}
render（）{
console.log(
在MenuItem.render中，this.context为：“，
本节（上下文）
报税表（{
（lorem）=>{
log（“在LoremContext.Consumer中，lorem为：”，lorem）
返回(

{`Eat${this.props.dish}在${lorem}}}

)
}
} )
}
}
MenuItem.contextType=LoremContext
类菜单扩展了React.Component{
render（）{
…
}
}
类应用程序扩展了React.Component{
render（）{
返回(
草甘膦

)
}
ReactDOM.render(
（在React 16.3中介绍）

根据记录在案的API，上述代码应该通过两种方式访问上下文（在返回值中定义）：


LoremContext.Consumer
组件接收由
LoremContext.Provider
传递的上下文值

然后使用者将该上下文值作为参数提供给该组件中的函数。在本例中，
lorem
是接收上下文值的参数

this.context
属性在“生命周期方法”中接收（因为）上下文值


其中只有一个对我有用


LoremContext.Consumer
API正在正确获取和传递上下文值。
console.log
输出为：

在LoremContext.Consumer中，lorem是：concerteur


this.context
没有得到正确的值，而是得到了一个空对象。
console.log
输出为：

在MenuItem.render中，上下文是：Object{}
在MenuItem.componentDidMount中，上下文是：对象{}

因此，消费者正在接收正确的值，但
this.context
不是。为什么会有差异？我如何才能在
this.context
处获得正确的值？
此。context
是在React 16.6中引入的，您可以看到

在此版本之前，在您正在使用的上，可以访问React生命周期内的上下文：

class Button extends React.Component {
  componentDidMount() {
    // ThemeContext value is this.props.theme
  }

  componentDidUpdate(prevProps, prevState) {
    // Previous ThemeContext value is prevProps.theme
    // New ThemeContext value is this.props.theme
  }

  render() {
    const {theme, children} = this.props;
    return (
      <button className={theme || 'light'}>
        {children}
      </button>
    );
  }
}

export default props => (
  <ThemeContext.Consumer>
    {theme => <Button {...props} theme={theme} />}
  </ThemeContext.Consumer>
);

class按钮扩展React.Component{
componentDidMount（）{
//ThemeContext值是this.props.theme
}
componentDidUpdate（prevProps、prevState）{
//Previous ThemeSecontext值是prevProps.theme
//新的ThemeContext值为this.props.theme
}
render（）{
const{theme，children}=this.props；
返回(
{儿童}
);
}
}
导出默认道具=>(
{主题=>}
);

请参见
尝试在单独的文件中创建上下文，然后导入它。这对我很有效。当在使用
标记的同一文件中调用
createContext
时，使用者只看到一个空对象。当我将
createContext
移动到单独的文件时，使用者看到了预期值。此ap适用于消费的两种方法-
和
MyClass.contextType/this.context

恐怕我无法解释为什么会这样，但我在中找到了解决方案。
不幸的是，如果目标组件中没有此部分，则它是空的

static contextType = ThemeContext; // assign the correct context 

在创造之前就像

const ThemeContext = React.createContext('light');

类似的问题没有回答这个问题（答案似乎假定API不会按照文档所述的方式工作，并提供了替代的解决方法）。“此.context是在React 16.6中引入的”-好吧，废话。如果他们在文档中这样说会更清楚，而不是在16.3中制造很多关于所有这些都是新的的噪音。谢谢。他们可以在某个地方使用新标签。但不幸的是，这是添加了一两天ago@bignose我没有发现任何不一致之处。React文档涵盖了最新版本，即16.6版现在，Context API是16.3。Context+contextType是16.6。如果您需要知道特定功能的来源，可以从变更日志或