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;
'getMoviesFromApi' - это асинхронная функция, что означает, что она возвращает обещание. Вы должны правильно выполнять обещание. –
Чтобы расширить ответ @FelixKling, используя 'var movies = await this.getMoviesFromApi()' будет работать, однако 'render' не является функцией async, и не является хорошим местом для извлечения материала с сервера, так как render получает вызов триллиона раз в течение жизненного цикла приложения React. Подумайте о переносе этой логики в 'componentDidMount' и установке некоторого состояния после возвращения ответа. – azium
Связанный: [Как вернуть ответ от асинхронного вызова?] (Http://stackoverflow.com/q/14220321/218196) –