Блог

Главная - Вопросы по программированию - Маршрутизатор контекста API реакции

Маршрутизатор контекста API реакции

#reactjs

Вопрос:

Поэтому я хочу в контекстном API использовать его для вызова и получения токена для моих вызовов API. Мне понадобится этот жетон, когда мой маршрут загрузится. Когда я веду журнал консоли, я вижу свойство контекста, но ничего в нем не вижу.

 render() {  return (  lt;Providergt;  lt;Routergt;  lt;React.Fragmentgt;  lt;Switchgt;  lt;Consumergt;  {value =gt; {  return (  lt;Route  exact  path="/:account_name"  component={ServiceMenu}  context={value}  /gt;  );  }}  lt;/Consumergt;  lt;/Switchgt;  lt;/React.Fragmentgt;  lt;/Routergt;  lt;/Providergt;  ); }

Затем в моем компоненте меню обслуживания я надеялся, что смогу получить доступ к нему здесь

 componentDidMount() {  console.log(this.context.token);   // Make more API calls that I can do now that I have the token

Вот контекст, который я создал

 import React, { Component } from "react"; import axios from "axios";  const Context = React.createContext();  export class Provider extends Component {  state = {  token: {}  };   componentDidMount() {  axios  .post(`${process.env.REACT_APP_HOST}/token`, null, {  headers  })  .then(res =gt; {  console.log(res.data);   this.setState({  token: res.data  });  })  .catch(err =gt; console.error(err));  }   render() {  return (  lt;Context.Provider value={this.state}gt;  {this.props.children}  lt;/Context.Providergt;  );  } }  const headers = {  "Subscription-Key": process.env.REACT_APP_APIM_KEY };  export const Consumer = Context.Consumer;

Но, как я уже сказал, этот контекст пуст. Мысли?

Комментарии:

1. Что вы получаете в консоли только res за то, а что нет res.data ? Можете ли вы подтвердить, что ваш серверный api получает сообщение?

2. Да, в конце концов я получу жетон обратно. Может быть, в это время значение может быть пустым?

3. Да, при первом монтировании контекст устанавливается только после монтирования компонента, поэтому вы всегда будете видеть пустой контекст для начала, по крайней мере, до тех пор, пока все компоненты не будут смонтированы и не запустят свой рендеринг после монтирования. Вам может быть полезно переместить сообщение axios в конструктор, который будет запущен до монтирования компонента, или использовать новые крючки React, а также async/await избежать ада цепочки обещаний

4. @Химера. Дзен Есть ли еще один жизненный цикл компонента, который я могу посмотреть, когда получу токен?

5. Кроме того, я просто отключил вызов API и просто сделал прямой объект, и все равно ничего

Метки: