在获取请求后无法使用响应 json 数据答案

【问题标题】：having trouble being able to use response json data after a fetch request在获取请求后无法使用响应 json 数据
【发布时间】：2018-09-27 03:53:53
【问题描述】：

我正在使用 react，我的目标是通过调用从 spotify api 获取 url 的函数将特定的 url 放入 href 中。函数如下所示：

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

然后调用一个从 Spotify api 获取 Url 的函数

 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，但它并没有像我想要的那样成为 href url 地址，即使我返回了那个值。有谁知道我怎样才能让这个值成为实际的 href url？

【问题讨论】：

您正在尝试异步设置属性 - console.log 正确的原因是因为它在 getPreviewUrl 解析后正确 - 但您不能设置这样的属性
你希望 <a href={this.state.previewURL}> 与 componentDidMount() { Spotify.[.....].then(respone => this.setState({ previewURL: response.preview_url }) 配对，这样 react 就可以简单地做它应该做的事情：根据 state/props 更新来更新你的 UI。

标签： javascript json reactjs api fetch

【解决方案1】：

使用状态变量来存储fetch的结果并赋值给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>
}

【讨论】：

我试过这个，但由于某种原因，我得到了一个无限循环，当我更新状态时我无法弄清楚？
您是否在侧渲染（）中更新了您的状态？这违反了react的规则，会导致无休止的重新渲染

【解决方案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);
            });
        }

【讨论】：

【解决方案3】：

尝试将 componentDidMount 与 React state 结合使用。

工作示例：https://codesandbox.io/s/9zr4znl8mo（用有效的 Spotify 令牌替换 token！）

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

【讨论】：