如何从函数中获取 JSON 对象？答案

【问题标题】：How do I get a JSON object from a function?如何从函数中获取 JSON 对象？
【发布时间】：2016-10-20 04:29:43
【问题描述】：

我有以下组件，我正在尝试从 API 检索电影列表。但是，变量movies 不包含预期的结果。

我做错了什么？

代码如下：

import React, { Component, } from 'react'
import { View } from 'react-native'
import { 
  List, 
  ListItem,
  Text,
} from 'native-base';

class Test extends Component {

  render() {
    var movies = this.getMoviesFromApi();

    for(var movie in movies)
    {
      console.warn(movie);
    }

    return (
          <List dataArray={movies}
            renderRow={(movie) =>
              <ListItem>
                  <Text>{movie}</Text>
              </ListItem>}
          />
      );
  }

  async getMoviesFromApi() {
    try {
      let response = await fetch('https://facebook.github.io/react-native/movies.json');
      let responseJson = await response.json();
      return responseJson.movies;
    } catch(error) {
      console.error(error);
    }
  }
}

export default Test;

【问题讨论】：

getMoviesFromApi 是一个异步函数，这意味着它返回一个承诺。你必须正确处理承诺。
要扩展 @FelixKling 响应，使用 var movies = await this.getMoviesFromApi() 会起作用，但是 render 不是异步函数，也不是从服务器获取内容的好地方，因为渲染被称为万亿在 React 应用程序生命周期中的时间。考虑将该逻辑移至componentDidMount，并在响应返回后设置一些状态。
相关：How do I return the response from an asynchronous call?
var movies = this.getMoviesFromApi().done();

标签： react-native async-await

【解决方案1】：

在您的 fetch 调用中，您应该使用 then() 调用返回响应。这是我编写的应用程序的一个示例：

// inside Utils/api.js
getAllSchools(accessToken){

var url = `${baseUrl}/schools`
return fetch(url).then((res) => res.json())
 .catch((e) => {
  console.log('an error occurred getting schools', e)
  api.logError(e.message);
 })
},

然后，无论您在哪里调用函数，都将电影设置为该响应：

api.getAllSchools("klsafj").then((res) => {
 var movies = res.data
 // then do whatever else you want to do with movies
 // or you could set movies to a state and use elsewhere
})

希望这会有所帮助。

【讨论】：