Question

我正在尝试使用React制作电影搜索应用程序，并已对电影数据库API进行了API调用。我想要做的是获取新电影发行版的数据，但是再进行一次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>

*我从最后一行得到错误

Answer 1

主要问题是，您要在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);
        });  
    }

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

无法访问Api通话数据。返回未定义。反应

1 个答案: