Невозможно получить доступ к данным вызова Api.Возвращает неопределенное.реагировать - PullRequest
Новая
       19

Невозможно получить доступ к данным вызова Api.Возвращает неопределенное.реагировать

0 голосов
/ 28 февраля 2019

Я пытаюсь создать приложение для поиска фильмов с помощью React и сделал API-вызов API The Movie Database.То, что я пытаюсь сделать, это получить данные о новых выпусках фильмов, а затем сделать еще один вызов API, чтобы получить конкретные детали для каждого из этих новых выпусков, поскольку эти данные хранятся в другом месте.

Я могу получить доступ к данным из первого вызова API, но когда я пытаюсь получить доступ к слоганам фильма из второго объекта данных, консоль выдает «Не удается прочитать свойство« слоган »неопределенного».

App.js 

  class App extends Component {
    constructor(props) {
      super(props)
      this.state = {
        movieRows: [],
        ids: [],
        movieDetails: [],
      }
      this.performSearch = this.performSearch.bind(this);        
    }

    componentDidMount() {
      this.performSearch();
    }

    performSearch() {
      const urlString = "https://api.themoviedb.org/3/movie/popular?api_key=6db3cd67e35336927891a72c05&language=en-US&page=1";
      axios.get(urlString)
        .then(res => {

          const results = res.data.results
          let movieRows = [];
          let movieDetails = [];

          results.forEach((movie) => {

            movieRows.push(movie);
            axios.get(`https://api.themoviedb.org/3/movie/${movie.id}?api_key=6db3cd67e35336927891a72c05&language=en-US`)
            .then(res => {
              movieDetails.push(res.data);
            })
            .catch(function (error) {
              console.log(error);
            });
          });

          this.setState({
            movieRows: movieRows,
            movieDetails: movieDetails,
          });
        })
        .catch(function (error) {
          console.log(error);
        });  
    }

Content.js 

export default class Content extends Component {
    constructor(props) {
        super(props)
        this.state = {
            name: 'Jonathan',
        }
        this.filmLoop = this.filmLoop.bind(this);
    }

    filmLoop() {

        let movieData = this.props.globalState.movieRows;
        let movieDetails = this.props.globalState.movieDetails;

        return movieData.map((movie, index) => {

            return (
                <div className="film" key={index}>
                    <img className="poster" src={`http://image.tmdb.org/t/p/w342${movie.poster_path}`} alt="The Dark Knight poster" />
                    <div className="film-info">
                        <div className="film-title">
                            <h3>{movie.title}</h3>
                        </div>
                        <h4>{movieDetails[index].tagline}</h4>

* Я получаю ошибку от последнеголиния

1 Ответ

0 голосов
/ 01 марта 2019

Ну, главная проблема в том, что вы звоните setState за пределы вашего .then, вы должны обновить состояние внутри вашего then или catch.Это связано с тем, что promise является функцией async, поэтому вы должны изменять состояние только тогда, когда обещание разрешено или отклонено. 

performSearch() {
      const urlString = "https://api.themoviedb.org/3/movie/popular?api_key=6db3cd67e35336927891a72c05&language=en-US&page=1";
      axios.get(urlString)
        .then(responsePopular => {

          const results = responsePopular.data.results
          let movieRows = [];
          let movieDetails = [];

          results.forEach((movie) => {

            movieRows = [...movieRows, movie];

            axios.get(`https://api.themoviedb.org/3/movie/${movie.id}?api_key=6db3cd67e35336927891a72c05&language=en-US`)
            .then(responseMovie => {
              movieDetails = [...movieDetails, responseMovie.data];
              this.setState({
                movieRows: movieRows,
                movieDetails: movieDetails,  
              })

            })
            .catch(function (error) {
              console.log(error);
            });
          });

        })
        .catch(function (error) {
          console.log(error);
        });  
    }

Я думаю, что это может решить вашу проблему.

...