Reactjs 我刚刚使用了react上下文，如果我在其他组件上使用控制台，为什么静态上下文不起作用

我有两个组件，第一个组件是“选择语言”组件，例如他是提供商，第二个组件是“登录”组件，作为消费者，我想获取提供商共享的值如何获取该值？问题是，当我在登录组件上控制台评估时，它是未定义的

这是我的供应商 在这个组件中没有问题

import MyContext from './MyContext'
export class SelectLanguage extends Component {
constructor(props){
    super(props)
    this.state = {
      loading:true,
      pages:''
    };
    this.handleChange = this.handleChange.bind(this)
  }
}
componentDidMount(){
 const getCodeFromLocal = this.props.resGet('lang-code')||'RUWT-EN';
      Api.post('pages-content', {CODE:getCodeFromLocal})
      .then((response) => {
        if(response.data.STATUS_CODE === '200'){
          this.setState({
            loading:false,
            pages:response.data.DATA
          });
        }
      })
    }
}
render() {
    const {language,loading,code,pages} = this.state
    if(loading){
      return(
        <p>loading...</p>
      )
    }else{
      return (
        <MyContext.Provider value={pages}>
          <Form.Group controlId="selectLanguage">
            <Form.Label><b>{pages.app_setting.language}</b></Form.Label>
            <Form.Control as="select" ref="selectLanguage" onChange={this.handleChange} value={code}>
              {language.map(data => {
                return(
                  <React.Fragment key={data.language_id}>
                    <option value={data.code}>{data.language_name}</option>
                  </React.Fragment>
                )
              })}
            </Form.Control>
          </Form.Group>
        </MyContext.Provider>
      )
    }
  }

从“./MyContext”导入MyContext
导出类SelectLanguage扩展组件{
建造师（道具）{
超级（道具）
此.state={
加载：对，
页面：“”
};
this.handleChange=this.handleChange.bind（this）
}
}
componentDidMount（）{
const getCodeFromLocal=this.props.resGet（'lang-code'）| |'RUWT-EN'；
Api.post（'pages-content'，{CODE:getCodeFromLocal}）
。然后（（响应）=>{
如果（response.data.STATUS_CODE==='200'）{
这是我的国家({
加载：false，
页面：response.data.data
});
}
})
}
}
render（）{
const{language，loading，code，pages}=this.state
如果（装载）{
返回(
加载

)
}否则{
返回(
{pages.app_setting.language}
{language.map（数据=>{
返回(
{data.language_name}
)
})}
)
}
}

这是我的消费者/静态上下文

export class Login extends Component {
constructor(props){
    super(props)
    this.state = {
      about:[]
    };
  }
}

static contextType = MyContext;

render() {
let value = this.context
console.log(value)
return(<p>tes</p>)
}

导出类登录扩展组件{
建造师（道具）{
超级（道具）
此.state={
关于：[]
};
}
}
静态contextType=MyContext；
render（）{
让value=this.context
console.log（值）
返回（tes
）
}

为什么值未定义？

---

即使当我在数据提供程序中进行控制台操作时，它也会出现

我已经使用了您的代码并在codesandbox中进行了一些更改。检查

---

如果要在呈现方法之外使用上下文值，请使用React.useContext，或者仅使用MyContext.Consumer包装登录呈现。我已经使用了您的代码并在codesandbox中进行了一些更改。检查

---

如果要在呈现方法之外使用上下文值，或仅使用MyContext包装登录呈现，请使用React.useContext。使用者有多种方法获取上下文值：

1）使用静态

contextType

：

let value = this.context; // checks for the context type static declaration below

MyClass.contextType = MyContext; // You already have done this

缺点：只能将一种上下文类型用于其绑定

---

正如您想知道的那样：首先绑定您拥有的上下文类型值。应用程序可能有更多的上下文类型。所以你是说我需要绑定这个上下文（注意它是静态的，所以在为类创建实例之前绑定它），并且你在实例化之后在类内部访问这个值

您的代码：

export class SelectLanguage extends Component {
   constructor(props){
        super(props)
        this.state = {
        loading:true,
        pages:''
   };
   this.handleChange = this.handleChange.bind(this)
}

。

}

2）使用上下文的

消费者

使用Consumer包装您的组件并用作道具：

<MyContext.Consumer>
{value => 
  <Foo bar={value}/>
}
</MyContext.Consumer>

---

优点：显然更干净，没有包装地狱和即插即用的概念。

获取上下文值有多种方法：

1）使用静态

contextType

：

let value = this.context; // checks for the context type static declaration below

MyClass.contextType = MyContext; // You already have done this

缺点：只能将一种上下文类型用于其绑定

---

正如您想知道的那样：首先绑定您拥有的上下文类型值。应用程序可能有更多的上下文类型。所以你是说我需要绑定这个上下文（注意它是静态的，所以在为类创建实例之前绑定它），并且你在实例化之后在类内部访问这个值

您的代码：

export class SelectLanguage extends Component {
   constructor(props){
        super(props)
        this.state = {
        loading:true,
        pages:''
   };
   this.handleChange = this.handleChange.bind(this)
}

。

}

2）使用上下文的

消费者

使用Consumer包装您的组件并用作道具：

<MyContext.Consumer>
{value => 
  <Foo bar={value}/>
}
</MyContext.Consumer>

---

优点：显然更干净，没有包装器地狱和即插即用的概念。

如果使用静态上下文，它必须与功能组件一起使用，嗯？如果使用静态上下文，它必须与功能组件一起使用，嗯？有什么区别让值=this.context；//检查MyClass.contextType=MyContext；//您已经使用static contextType=Mycontext完成了这项工作？首先，您要绑定您拥有的上下文类型值。应用程序可能有更多的上下文类型。所以你是说我需要绑定这个上下文（注意它是静态的，所以在为类创建实例之前绑定它），并且你在实例化之后在类内部访问这个值。（用代码更新答案）let value=this.context；//检查MyClass.contextType=MyContext；//您已经使用static contextType=Mycontext完成了这项工作？首先，您要绑定您拥有的上下文类型值。应用程序可能有更多的上下文类型。所以你是说我需要绑定这个上下文（注意它是静态的，所以在为类创建实例之前绑定它），并且你在实例化之后在类内部访问这个值。（用代码更新答案）