Instagram 返回一个空白页面

Question

我正在尝试建立一个页面，我们可以在其中概览链接到应用程序的 Instagram 帐户。 目标是像展示一样展示图像，使应用程序的用户想要去看客户。 我担心的是我翻了一个空白页。 安慰他们。日志返回：

但我不明白为什么，我有正确的令牌/ID，在我有我的应用程序的开发人员的 facebook 页面上检索... 您能否给我您的意见，并帮助我了解这是错误的地方？

非常感谢，我被困住了。

My code : 

export default class Instagram extends Component {
  access_token ="IzdnBJ";
  user_id = "171";

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

  componentDidMount() {
    this.fetchFeed();
    console.log('so', this.state);
  }

  async fetchFeed() {
    try {
      // Get user_id + access_token
      //let authorization_code_result = await fetch(
        //"https://api.instagram.com/oauth/authorize?app_id=12911&redirect_uri=https://www.restaurant-le-gavroche.com/&scope=user_profile,user_media&response_type=code"
      //);
      let authorization_code_result = "AQA2APj4WlbJXfsmwfx_2NfFaHcKOnIALksHIGFg7dryQ";
      if (authorization_code_result) {
        let access_token_result = await fetch(
            "https://api.instagram.com/oauth/access_token",
          {
            method: "POST",
            headers: {
              Accept: "application/json",
              "Content-Type": "application/json"
            },
            body: JSON.stringify({
              app_id: 121,
              app_secret: "626e23",
              grant_type: "authorization_code",
              redirect_uri: "https://www.restaurant-le-gavroche.com/",
              code: authorization_code_result
            })
          }
        )
        .then(response => response.json())
        .then(responseData => {
          console.log("access_token_result:: ", responseData);
    console.log("authorization_code_result: ", authorization_code_result);

          if (responseData.user_id && responseData.access_token) {
            this.user_id = responseData.user_id;
            this.access_token = responseData.access_token;
          }
        });

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

        this.setState({
          data: posts.data,
          comments: comments,
          loaded: true
        });
      }
    } catch (error) {
       this.setState({ error: error });
       console.log("error " + error);
       this.setState({ showProgress: false });
     }
  }

  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.insta_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) {
    console.log('pp', posts);
    if (posts.map) {
      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>
    );
  }
}