возникли проблемы с возможностью использовать ответные данные JSON после запроса на выборку

Question

Я использую реагирование, и моя цель - получить конкретный URL-адрес в href, вызвав функцию, которая получает URL-адрес из API-интерфейса spotify.функция выглядит следующим образом:

<a href={Spotify.getPreviewUrl(this.props.track.ID).then(results => {
                        console.log(results);
                        return results;
                    })}>Track Preview</a>

Затем вызывается функция, которая получает URL-адрес от API Spotify

 getPreviewUrl(trackId) {
            return fetch(`https://api.spotify.com/v1/tracks/${trackId}`, {
                headers: {
                    Authorization: `Bearer ${usersAccessToken}`
                }
            }).then(response =>
                response.json()).then(jsonResponse => {
                console.log(jsonResponse);
                return jsonResponse.preview_url;
                });
            }

сейчасвернемся к моему первоначальному вызову:

<a href={Spotify.getPreviewUrl(this.props.track.ID).then(results => {
                        console.log(results);
                        return results;
                    })}>Track Preview</a>

значение console.log () - это именно тот URL, который я хочу, но он не становится URL-адресом href, как я этого тоже хочуя возвращаю это значение.Кто-нибудь знает, как я могу получить это значение как действительный HREF URL?

Answer 1

Попробуйте использовать componentDidMount в сочетании с React state.

Рабочий пример: https://codesandbox.io/s/9zr4znl8mo ( замените token действительным токеном Spotify! )

import React, { Component, Fragment } from "react";
import Spinner from "./Spinner";
import ShowError from "./ShowError";
import ShowTrack from "./ShowTrack";

export default class Spotify extends Component {
  state = {
    artist: "",
    err: "",
    image: "",
    isLoading: true,
    link: "",
    token: "FAKE_TOKEN",
    trackName: "",
    trackId: "2Ll0eOXFmIeBlcybOSaQJm"
  };

  componentDidMount = () => {
    const { token, trackId } = this.state;

    fetch(`https://api.spotify.com/v1/tracks/${trackId}`, {
      headers: {
        Authorization: `Bearer ${token}`
      }
    })
      .then(res => res.json())
      .then(({ artists, name, preview_url, album: { images } }) =>
        this.setState({
          artist: artists && artists.length > 0 ? artists[0].name : null,
          link: preview_url,
          image: images && images.length > 0 ? images[0].url : null,
          isLoading: false,
          trackName: name
        })
      )
      .catch(err => this.setState({ err: err.toString(), isLoading: false }));
  };

  render = () =>
    this.state.err 
      ? <ShowError err={this.state.err} />
      : this.state.isLoading
        ? <Spinner />
        : <ShowTrack {...this.state} />
  );
}

Answer 2

      // return a Promise from within .then() as enter code here
       const getResult = (result) => result;
       const Promise = require('bluebird');
       let promisifiedResult = Promise.promisify(getResult);


       getPreviewUrl(trackId) {
        return fetch(`https://api.spotify.com/v1/tracks/${trackId}`, 
        {
            headers: {
                Authorization: `Bearer ${usersAccessToken}`
            }
        }).then(response =>
            response.json()).then(jsonResponse => {
               return promisifiedResult (jsonResponse.preview_url);
            });
        }

Answer 3

Используйте переменную состояния, чтобы сохранить результат выборки и присвоить его href,

constructor(){
  super();
  this.state={link:null};
}

componentDidMount(){
   Spotify.getPreviewUrl(this.props.track.ID).then(results => {
      this.setState({link:results});
    })
}
....
render(){
  return ...
        <a href={this.state.link}>Track Preview</a>
}