javascript - 获取 API、React 后未定义的值

Question

我正在使用 themoviedb API 构建一个简单的电影目录，但是我遇到了一个我无法解决的问题。问题是获取后的结果始终未定义。

我尝试使用方法 componentWillMount 来获取数据并在此方法中设置状态，但它不起作用。我试图获取内部构造函数，没有结果。

到目前为止，这是我的代码

import React, { Component } from 'react';
import Header from './components/Header';
import MovieList from './components/MovieList';
import Footer from './components/Footer';

const MOVIE_API = "http://api.themoviedb.org/3/discover/movie?api_key=72049b7019c79f226fad8eec6e1ee889&language=en-US&sort_by=release_date.desc&include_adult=true&include_video=false&page=2&primary_release_year=2018";

//class
class App extends Component {
  constructor(props){
    super(props);

    this.state = {
      movies: [],
      movieName: ''
    }
  }


  componentWillMount(){
    this.fetchMovie();
  }


//fetching movie
  fetchMovie = () =>{
    const req = new Request(MOVIE_API, {
      method: 'GET',
      cache: 'default'
    });

    fetch(req).then(response =>{
      return response.json();
    }).then(data =>{
      console.log(data); //REF 1;
      this.setState({
        movies: data
      });
    }).catch(err => {
      console.log("ERROR: " + err);
    })
  }

  render() {
    return (
      <div className="root">
        <Header />
        <MovieList moviesRes={this.state.movies}/>
        <Footer />

      </div>
    );
  }
}

export default App;

如您所见，我调用了方法 componentWillMount 来获取数据，但它不起作用。同样值得注意的是，如果我记录数据 (REF 1)，我可以看到结果 (json)。

===========================

编辑

这是 MovieList 的代码

/*import React, { Component } from 'react';

export default class MovieList extends Component{
    constructor(props){
        super(props);
        this.state = {
            movies: this.props.movieRes
        }
    }
    render(){

        //if result is undefined 
        if(this.state.movieRes === undefined){
            return(
                <h1>Loading...</h1>
            );
        }else{
            return(
                <ul>
                {this.state.movieRes.map((movie, index)=>{
                    return (
                        <li key={index}>{movie.title}</li>
                    );
                })}
                </ul>
            );
        }
    }
}*/

=================

更新子代码

import React, { Component } from 'react';

export default class MovieList extends Component{

    render(){
        const { movieRes = [] } = this.props; // we are assigning a default prop here of an empty array.
        return(
            <ul>
                {
                    //return movie from array
                    movieRes.map((movie, index)=>{
                        return (
                            <li key={index}>
                                {movie.id}
                            </li>
                        );
                    })
                }
            </ul>
        );
    }
}

我以这种方式抑制了错误，但仍然无法正常工作。据我了解，React 应该在检测到更改后立即呈现，但由于某些原因并非如此。

IMAGE

正如您从图像中看到的那样，当我将数组从父组件传递到子组件时，数组长度为 20，但在子组件中，数组长度似乎为 0

===================

解决方案

我将组件从 class 更改为 const 并将数组传递给它，一切都很顺利。这是最终代码:

import React from 'react';

const MovieList = ({movies}) =>{
    if(!movies){
        return <h1>Loading...</h1>
    }
    return (
        <ul>
            {
                movies.map((movie, index) => {
                    return (
                        <li key={index}>
                            <p>{movie.title}</p>
                        </li>
                    )
                })
            }
        </ul>
    );

}

export default MovieList;

Answer 1

最初我误解了你的问题，但在重新阅读之后我注意到你在构造函数中将电影定义为一个数组。

如果没有实际的错误消息，我将假设 MovieList 需要一个数组来表示它的 movieRes 属性，然后您可能正在尝试执行类似 .map 的操作或循环渲染电影。

但是，您使用的 API 不返回数组。它在 results 下返回一个带有数组键的对象。因此，我将其更改为在执行 setState 时访问 data.results。

//fetching movie
  fetchMovie = () =>{
    const req = new Request(MOVIE_API, {
      method: 'GET',
      cache: 'default'
    });

    fetch(req).then(response =>{
      return response.json();
    }).then(data =>{
      console.log(data);
      this.setState({
        movies: data.results // <-- change made here.
      });
    }).catch(err => {
      console.log("ERROR: " + err);
    })
  }

这是一个有效的 JSFiddle:

https://jsfiddle.net/patrickgordon/69z2wepo/99513/

编辑:在子组件中，不要将 props 分配给 state，只需使用 props 和 default props。

import React, { Component } from 'react';

export default class MovieList extends Component{
    render(){
        const { movieRes = [] } = this.props; // we are assigning a default prop here of an empty array.
        return(
            <ul>
                {movieRes.map((movie, index)=>{
                    return (
                        <li key={index}>{movie.title}</li>
                    );
                })}
            </ul>
        );
    }
}