ReactJS - топор ios перехватчик при отправке - PullRequest
Новая
       73

ReactJS - топор ios перехватчик при отправке

1 голос
/ 27 апреля 2020

Структура: 

ApiService.js
components/
          TrackComponent.jsx

TrackComponent.jsx

У меня есть эта форма в моем React в render(), которая вызывает событие, которое достигает одной конечной точки: 

<form onSubmit={ (event) => this.handleEditPlaylist(event) }>
 <div className="field">
   <input
     name="artist"
     className="input is-dark is-large"
     type="text"
   />
  </div>
</form>

функция обработки: 

handleEditPlaylist(event) {
    event.preventDefault();
    const formType = this.props.formType
    var headers = {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${window.localStorage.authToken}`
      }
    const {userId} = this.props
    const data = {
      value: this.state.formData.value,
      spotify_token: this.props.spotifyToken
    };
    const url = `${process.env.REACT_APP_WEB_SERVICE_URL}/handle_edit_playlist/${this.state.artist}/${userId}`;

    axios.post(url, data, {headers: headers})
      .then((res) => {
        console.log(data);
        if(data){this.clearForm();}
      })
      .catch((err) => {
    });

    axios.get(url, { 
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${window.localStorage.authToken}`
      }
      }).then((res) => {
          console.log(res.data);
          this.setState({
            seeds: res.data.data[0].seeds,
            artist: res.data.data[0].artist,
          })
      })
  };

Это работает.

Экземпляр API внутри компонента

Теперь, У меня есть axios перехватчик, который я должен создать в моем компоненте выше для обработки токенов доступа, которые имеют две конечные точки. 

import Axios from 'axios';

class ApiService {
  constructor() {
    this.axios = Axios.create();
    this.axios.interceptors.response.use(null, this.authInterceptor.bind(this));

    this.get = this.axios.get.bind(this.axios);
    this.post = this.axios.post.bind(this.axios);
  }

  async authorize() {
    console.log('Async in authorize')
    const { accessToken } = await this.axios.post('/get_token/1', {});
    this.setAccessToken(accessToken);
    return accessToken; // return it to the component that invoked it to store in some state
  }

  async getTrack(userId, spotifyToken, artist) { // <---------------------------
    console.log('getAroma in ApiService', userId, spotifyToken, artist)
    return this.axios.get(
      `${process.env.REACT_APP_WEB_SERVICE_URL}/get-tracks/${artist}/${userId}/${spotifyToken}`
    );
  }

  async updateAccessToken(userId) {
    const { accessToken } = await this.axios.post(`/refresh-token/1`, {});
    this.setAccessToken(accessToken);
  }

  (...)

export const apiService = new ApiService(); // this is a single instance of the service, each import of this file will get it

Я хотел бы иметь тот же onSubmit Вышеуказанное событие также вызывает вызов экземпляра перехватчика. Сам по себе я мог бы сделать так: 

import {apiService} from '../ApiService';

async getTrack(event) {
    if (this.props.isAuthenticated) {
      const {userId, spotifyToken} = this.props;
      const {artist} = this.state.artist
      const aromaticTracks = await apiService.getTracks(userId, spotifyToken, artist);
      this.setState({newTracks});
    } else {
      this.setState({newTracks: []});
    }
  }

Если я вставлю этот асин c getTrack в handleEditPlaylist, сразу после отправки формы, например: 

(...)

axios.post(url, data, {headers: headers})
      .then((res) => {
        this.getTrack(); // <----------- HERE
        console.log(data);
        if(data){this.clearForm();}
      })
(...)

Я получаю 'undefined' для значений, отправленных формой (исполнитель), в async getTrack console.log('getTrack in ApiService', userId, spotifyToken, artist), но печатаю значение, представленное в console.log(data) справа внизу.

Как мне правильно обращаться с этим перехватчиком onSubmit?

1 Ответ

1 голос
/ 29 апреля 2020

Единственная проблема в вашем коде заключается в том, что вы пытаетесь деструктурировать значение из состояния, к которому вы уже обращаетесь 

async getTrack(event) {
    if (this.props.isAuthenticated) {
      const {userId, spotifyToken} = this.props;
      const {artist} = this.state; // this needs to be this.state and not this.state.artist
      const aromaticTracks = await apiService.getTracks(userId, spotifyToken, artist);
      this.setState({newTracks});
    } else {
      this.setState({newTracks: []});
    }
  }

Синтаксис присваивания destructuring - это выражение JavaScript, которое делает возможным распаковать значения из массивов или свойства объектов в отдельные переменные.

Прочитайте документацию для object destructuring

...