Javascript 使用Promise从异步服务响应useContext

我想创建一个实际来自某个异步服务（例如服务器数据）的上下文

//用于获取上下文数据的异步服务
export const fetchContextFromAsycnService=（）=>{
返回新承诺（resolve=>setTimeout(
（）=>resolve（'嘿，我在异步上下文中，我是正确的值'），200）
);
} 
类应用程序扩展组件{
render（）{
let value='Im不是正确的值'；
fetchContextFromAsycnService（）。然后（x=>value=x作为字符串）；
返回(

预期值为：
嘿，我在异步上下文中，我是正确的值
，但由于某些原因，我在获取数据后没有获取数据。

有没有一种方法可以创建一个上下文

但是由于某些原因，我在获取数据后没有获取数据

值
不是状态的一部分，并且不会导致重新呈现。因此，您没有看到在获取后显示更新的值

要使其工作，只需将
value
作为状态的一部分，即可导致重新渲染

state = {
  value: 'Im not the correct value'
}

componentDidMount() {
  // move side-effects in here
  fetchContextFromAsycnService().then(value => this.setState({ value }));
}

render() {
  return (
    <AsyncContext.Provider value={this.state.value}>
      <SomeComponent />
    </AsyncContext.Provider>
  );
}

状态={
值：“我不是正确的值”
}
componentDidMount（）{
//把副作用移到这里
fetchContextFromAsycnService（）.then（value=>this.setState（{value}））；
}
render（）{
返回(
只是一个简单的问题。是否可以在return语句之前使用它？在
render（）
body内。thanksIt是可能的，但不是一个好的做法。
render（）
唯一的目的基本上只是显示，而不是用于副作用（即获取）。@SexyMF答案中有一个演示链接在return语句之前使用它。
state = {
  value: 'Im not the correct value'
}

componentDidMount() {
  // move side-effects in here
  fetchContextFromAsycnService().then(value => this.setState({ value }));
}

render() {
  return (
    <AsyncContext.Provider value={this.state.value}>
      <SomeComponent />
    </AsyncContext.Provider>
  );
}