1

我正在尝试使用 React 制作电影搜索应用程序，并对电影数据库 API 进行了 API 调用。我想要做的是获取新电影版本的数据，然后进行另一个 API 调用以获取每个新版本的具体细节，因为这些数据存储在不同的位置。

我能够从第一个 API 调用访问数据，但是当我尝试从第二个数据对象访问电影标语时，控制台输出“无法读取未定义的属性‘标语’”。

应用程序.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);
        });  
    }

内容.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>

*我从最后一行得到错误

4

1 回答 1

0

好吧，主要问题是您在您的setState外部调用，.then您必须更新您then或您的内部的状态catch。这是因为它promise是一个async函数，所以只有在 promise 被解决或被拒绝时才需要更改状态。

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);
        });  
    }

我认为这可以解决您的问题。

于 2019-02-28T23:55:22.310 回答