Реагировать на useContext из асинхронной службы с помощью Promise

Question 1

Я хочу создать контекст, который на самом деле исходит от некоторой асинхронной службы (например, данные сервера).

//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, но по какой-то причине я не получаю данные после их получения.
есть ли способ создать контекст с

javascript reactjs react-context

2

SexyMF 4 Окт 2019 в 08:56

Answer

но по какой-то причине я не получаю данные после того, как они были получены.

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>
  );
}

См. Демонстрацию

3

Joseph D. 4 Окт 2019 в 06:01

Question 2

но по какой-то причине я не получаю данные после того, как они были получены.

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>
  );
}

См. Демонстрацию

3

Joseph D. 4 Окт 2019 в 06:01

Реагировать на useContext из асинхронной службы с помощью Promise

1 ответ

Похожие вопросы

Новые вопросы

javascript