React / FetchAPI: Как получить данные из связанных json по id
Это происходит, если вы создаете свои объекты GregorianCalendar, например, как new GregorianCalendar(2018, 7, 13) для 13 июля. GregorianCalendar использует нумерующий странный месяц, поэтому вы не получаете 13 июля.
Решение бросить этот длинный устаревший и плохо разработанный класс и создать свои даты, используя, например, LocalDate.of(2018, 7, 13) или даже лучше, LocalDate.of(2018, Month.JULY, 13). Затем используйте ChronoUnit.DAYS.between для нахождения количества дней между датами.
Ссылка: Учебник Oracle: Date Time , объясняющий, как использовать java.time, современную дату и время Java API.
2 ответа
Причина, по которой он не работает, заключается в том, что вы запускаете несколько вызовов извлечения, которые являются асинхронными, и устанавливаете состояние сразу после него. setState получит пустые фильмы в этом случае.
fetch api возвращает обещание, и вы должны установить свое состояние в обработчике разрешения обещаний. Измените ваш componentDidMount, как это.
componentDidMount() {
fetch('https://api.themoviedb.org/3/movie/popular?api_key=APIKEY&page=1')
.then(response => response.json())
.then(data => {
const movies = data.results;
Promise.all(movies.map(movie => fetch(
`https://api.themoviedb.org/3/movie/${movie.id}?api_key=APIKEY`
)))
.then(resp => Promise.all( resp.map(r => r.json()) ))
.then(result => {
const movies = result.map((data, i) => {
const movie = Object.assign(movies[i], {
genres: data.genres,
homepage: data.homepage
});
return movie;
});
this.setState({
movies
});
});
})
}
В этом случае вам нужно асинхронное ожидание, и хорошо использовать Promise.all, потому что вы делаете выборку в forEach.
Для forEach вам нужно дождаться Promise.all, а для получения нужно дождаться. Это означает, что он будет ждать, пока forEach будет завершен
Изменить
fetch('https://api.themoviedb.org/3/movie/popular?api_key=APIKEY&page=1')
.then(response => response.json())
.then(data => {
const movies = data.results;
movies.forEach(movie => this.moviePageAndGenres(movie.id, movie));
this.setState({
movies
});
})
на
fetch('https://api.themoviedb.org/3/movie/popular?api_key=APIKEY&page=1')
.then(response => response.json())
.then(async data => {
const movies = data.results;
await Promise.all(movies.forEach(async movie => await this.moviePageAndGenres(movie.id, movie)))
this.setState({
movies
});
})
Также
Изменить
moviePageAndGenres = (id, element) => {
fetch('https://api.themoviedb.org/3/movie/' + id + '?api_key=APIKEY')
.then(response => response.json())
.then(data => {
element.genres = data.genres;
element.homepage = data.homepage;
});
}
К
moviePageAndGenres = async (id, element) => {
return await fetch('https://api.themoviedb.org/3/movie/' + id + '?api_key=APIKEY')
.then(response => response.json())
.then(data => {
element.genres = data.genres;
element.homepage = data.homepage;
});
}