2016-10-19 4 views
0

У меня есть следующий компонент, и я пытаюсь получить список фильмов из API. Однако переменная movies не содержит ожидаемого результата.Как получить объект JSON от функции?

Что я делаю неправильно?

Вот код:

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; 
+1

'getMoviesFromApi' - это асинхронная функция, что означает, что она возвращает обещание. Вы должны правильно выполнять обещание. –

+4

Чтобы расширить ответ @FelixKling, используя 'var movies = await this.getMoviesFromApi()' будет работать, однако 'render' не является функцией async, и не является хорошим местом для извлечения материала с сервера, так как render получает вызов триллиона раз в течение жизненного цикла приложения React. Подумайте о переносе этой логики в 'componentDidMount' и установке некоторого состояния после возвращения ответа. – azium

+0

Связанный: [Как вернуть ответ от асинхронного вызова?] (Http://stackoverflow.com/q/14220321/218196) –

ответ

2

В вашей выборки позвонить, вы должны вернуть ответ с 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 
}) 

Надеется, что это помогает.

Смежные вопросы