使用 Promise 响应来自异步服务的 useContext

Posted 2023-04-14

【中文标题】使用 Promise 响应来自异步服务的 useContext

【英文标题】：React useContext from async service with Promise

【发布时间】：2020-02-02 10:53:55

【问题描述】：

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

//the async service to bring the context data
export const fetchContextFromAsycnService = () => 
  return  new Promise(resolve => setTimeout(
      () => resolve('Hey, im in the async context and I am the correct value'), 200)
  );
 

class App extends Component 
  render() 
    let value = 'Im not the correct value';
    fetchContextFromAsycnService().then(x => value = x as string);
    return (
      <AsyncContext.Provider value=value>
       <SomeComponent />
      </AsyncContext.Provider>
    );
  

//user the value
export const SomeComponent = ( ) => 
  return  (
    <AsyncContext.Consumer>
     value => <div>value</div>
  </AsyncContext.Consumer>)

render(<App />, document.getElementById('root'));

https://stackblitz.com/edit/react-ts-8zzbxa?file=index.tsx

预期值为：Hey, I'm in the async context and I am the correct value，但由于某种原因，我在获取数据后没有得到数据。 有没有办法用

创建上下文

【参考方案1】：

但由于某种原因，我在获取数据后没有得到数据。

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

要完成这项工作，只需将 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>
  );

See Demo

【讨论】：

只是一个简单的问题。是否可以在 return 语句之前使用它？在render() 体内。谢谢

这是可能的，但不是一个好习惯。 render() 唯一的目的基本上只是为了显示而不是用于副作用（即获取）。

@SexyMF 在返回语句之前使用它的答案中有一个演示链接。