世博会中的Instagram /本机反应

Question

我正在尝试在我的应用程序中创建一个页面，以便可以看到我在应用程序Instagram帐户上发布的其他照片。 我有访问令牌和用户ID，正在尝试以下代码，但出现空白页和错误消息：

[未处理的承诺被拒绝：SyntaxError：JSON解析错误： 无法识别的令牌'<']

我仍然遇到相同的错误，找不到导致它的原因。

 import React, { Component } from "react";
import {
  Text,
  View,
  StyleSheet,
  Image,
  Dimensions,
  FlatList
} from "react-native";
import { Constants, AppLoading } from "expo";

export default class Instagram extends Component {
  access_token ="IGQVJVdDF1RUg1SG9V...";
  user_id = "17841...";

  state = {
    loaded: false,
    data: null,
    comments: []
  };

  componentDidMount() {
    this.fetchFeed();
  }

  async fetchFeed() {
    let response = await fetch(
      "https://api.instagram.com/v1/users/" +
        this.user_id +
        "/media/recent/?access_token=" +
        this.access_token
    );
    let posts = await response.json();
    let comments = await this.makeCommentsList(posts.data);

    this.setState({
      data: posts.data,
      comments: comments,
      loaded: true
    });
  }

  createPost(postInfo, index) {
    let imageUri = postInfo.images.standard_resolution.url;
    let username = postInfo.user.username;
    let numLikes = postInfo.likes.count;

    return (
      <View>
        <Image style={styles.image} source={{ uri: imageUri }} />
        <View style={styles.info}>
          <Text style={styles.infoText}>{username}</Text>
          <Text style={styles.infoText}>
            {numLikes + (numLikes !== 1 ? " likes" : " like")}
          </Text>
        </View>
        <View>{this.state.comments[index]}</View>
      </View>
    );
  }

  async makeCommentsList(posts) {
    let postsArray = posts.map(async post => {
      let postId = post.id;

      if (post.comments.count === 0) {
        return (
          <View style={styles.comment} key={postId}>
            <Text>No Comments!</Text>
          </View>
        );
      } else {
        let response = await fetch(
          "https://api.instagram.com/v1/media/" +
            postId +
            "/comments?access_token=" +
            this.access_token
        );
        let comments = await response.json();
        let commentsArray = comments.data;
        // console.log(commentsArray)
        let commentsList = commentsArray.map(commentInfo => {
          return (
            <View style={styles.comment} key={commentInfo.id}>
              <Text style={styles.commentText}>
                {commentInfo.from.username}
              </Text>
              <Text>{commentInfo.text}</Text>
            </View>
          );
        });
        return commentsList;
      }
    });

    postsArray = await Promise.all(postsArray);
    return postsArray;
  }

  render() {
    if (!this.state.loaded) {
      return <AppLoading />;
    }
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.data}
          renderItem={({ item, index }) => this.createPost(item, index)}
          keyExtractor={item => item.id}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    // paddingTop: Constants.statusBarHeight,
    backgroundColor: "#ecf0f1"
  },
  image: {
    width: Dimensions.get("window").width,
    height: Dimensions.get("window").width
  },
  info: {
    flexDirection: "row",
    justifyContent: "space-between",
    padding: 10,
    paddingLeft: 15,
    paddingRight: 15,
    borderBottomWidth: 1,
    borderColor: "#d8d8d8"
  },
  infoText: {
    fontSize: 16,
    fontWeight: "bold"
  },
  comment: {
    flexDirection: "row",
    padding: 10,
    paddingLeft: 15,
    borderBottomWidth: 1,
    borderColor: "#d8d8d8"
  },
  commentText: {
    paddingRight: 15,
    fontWeight: "bold"
  }
});