Question

我非常坚持尝试在反应应用程序上设置API。我手动测试了我的访问令牌并且它正常工作

https://api.instagram.com/v1/users/self/media/recent/?access_token=${accessToken}

但当我将这些数据导入应用程序的声明时，我感到困惑。

我检查组件的体系结构将手动url添加到状态并且它已经解决了，所以我得到的问题可能在我调用diplayInsta（）或util / insta.js方法的函数中

const Insta = {
  getAccessToken() {
    //check if token exist
    if (accessToken) {
      return new Promise(resolve => resolve(accessToken));
    }
    //token ref
    return fetch(`https://api.instagram.com/oauth/authorize/? client_id=${client_id}&redirect_uri=${redirectURI}&response_type=token`, {
      method: 'POST'
    }).then(response => {
      return response.json();
    }).then(jsonResponse => {
      accessToken = jsonResponse.access_token;
    });
  },
  async display() {
    if (!accessToken) {
      this.getAccessToken();
    }
    try {
      let response = await fetch(`https://api.instagram.com/v1/users/self/media/recent/?access_token=${accessToken}`, {
        method: 'GET',
        headers: {
          Authorization: `Bearer ${accessToken}`
        }
      });
      if (response.ok) {
        let jsonResponse = await response.json();
        let medias = jsonResponse.medias.data.map(media => ({
          id: media.data.id,
          image: media.data.images.standard_resolution.url
        }));
        return medias;
      }
      throw new Error('Request failed!');
    } catch (error) {
      console.log(error);
    }
  }
}

这是项目的github链接，您可以在其中找到整个项目。 https://github.com/erwanriou/reactisbroken

我觉得这可能是一个非常小的错误，但我找不到它的位置......我的好心灵可以帮助我向我展示好的方向......

更新 - 在第一个答案之后我确实实现了代码，我现在解决了访问令牌部分，但仍然坚持将其显示到App.js状态这是我的主要问题。

这是一个工作承诺的屏幕： https://www.dropbox.com/s/w9wh3h3m58r3n06/Promise.jpg?dl=0

Answer 1

好的，我发现自己是解决方案。我把它放在这里以防你们中的一些人遇到类似的问题：

let accessToken;

const Insta = {
  getAccessToken() {
    if (accessToken) {
      return new Promise(resolve => resolve(accessToken));
    }
    const accessTokenMatch = window.location.href.match(/access_token=([^&]*)/);
    if (accessTokenMatch) {
      accessToken = accessTokenMatch[1];
      return accessToken;
    } else {
      const Url = `https://api.instagram.com/oauth/authorize/?client_id=${client_id}&redirect_uri=${redirectURI}&response_type=token`
      window.location = Url;
    }
  },
  async display() {
    if (!accessToken) {
      this.getAccessToken();
    }
    try {
      let response = await fetch(`https://api.instagram.com/v1/users/self/media/recent/?access_token=${accessToken}`, {
        method: 'GET'
      });
      if (response.ok) {
        console.log(response);
        let jsonResponse = await response.json();
        let medias = jsonResponse.data.map(media => ({
          id: media.id,
          image: media.images.standard_resolution.url
        }));
        return medias;
      }
      throw new Error('Request failed!');
    } catch (error) {
      console.log(error);
    }
  }
}

现在将获取数据导入状态的部分是：

import React, { Component } from 'react';
import './App.css';

import Header from '../Header/Header.js';
import MediaList from '../MediaList/MediaList.js';
import Insta from '../../util/insta.js';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      mediasResult: [],
      accountName: 'Erwan'
    };
  }


  componentDidMount() {
    Insta.display().then(medias => this.setState({mediasResult: medias}));
  }

  render() {
    return (
      <div className="App">
        <Header accountName={this.state.accountName}/>
        <MediaList medias={this.state.mediasResult}/>
      </div>
    );
  }
}

export default App;

实际上componentDidMount保存了我的一天。它允许您将获取数据导入状态。

Instagram API，在反应应用程序中diplaying媒体

1 个答案: