Javascript 获取API后未定义的值，React

我正在使用MovieDB 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;

import React，{Component}来自'React'；
从“./components/Header”导入标题；
从“./components/MovieList”导入MovieList；
从“./components/Footer”导入页脚；
const MOVIE_API=”http://api.themoviedb.org/3/discover/movie?api_key=72049b7019c79f226fad8eec6e1ee889&language=en-美国和排序依据=发布日期。描述和包含成人=真实和包含视频=错误和页面=2和主要发布年份=2018”；
//阶级
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
电影：[]，
电影名称：“”
}
}
组件willmount（）{
这是一部电影（）；
}
//吸引人的电影
fetchMovie=（）=>{
const req=新请求（电影API{
方法：“GET”，
缓存：“默认”
});
获取（请求）。然后（响应=>{
返回response.json（）；
})。然后（数据=>{
console.log（数据）；//参考1；
这是我的国家({
电影：数据
});
}).catch（错误=>{
日志（“错误：+err”）；
})
}
render（）{
返回(
);
}
}
导出默认应用程序；

如您所见，我调用了方法componentWillMount来获取数据，但它不起作用。 同样值得注意的是，如果我记录数据（参考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>
            );
        }
    }
}*/

/*从“React”导入React，{Component}；
导出默认类MovieList扩展组件{
建造师（道具）{
超级（道具）；
此.state={
电影：这个。道具。电影片
}
}
render（）{
//如果结果未定义
if（this.state.movieRes==未定义）{
返回(
加载。。。
);
}否则{
返回(

{this.state.movieRes.map（（电影，索引）=>{
返回(
{movie.title}
);
})}

);
}
}
}*/

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

更新子代码

import React，{Component}来自'React'；
导出默认类MovieList扩展组件{
render（）{
const{movieRes=[]}=this.props；//我们在这里分配一个空数组的默认prop。
返回(

{
//从阵列返回电影
movieRes.map（（电影，索引）=>{
返回(

{movie.id}

);
})
}

);
}
}

通过这种方式，我抑制了错误，但它仍然不起作用。 据我所知，React应该在检测到变化时立即呈现，但由于某些原因，情况并非如此

从图中可以看出，当我将数组从父组件传递到子组件时，数组长度为20，但在子组件中，数组长度似乎为0

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

解决方案 我将组件从类更改为常量，并将数组传递给它，一切都很顺利。以下是最终代码：

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;

从“React”导入React；
常数MovieList=（{movies}）=>{
如果（！电影）{
返回加载。。。
}
返回(

{
movies.map（（电影，索引）=>{
返回(

{movie.title}


)
})
}

);
}
导出默认电影列表；

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

在没有实际错误消息的情况下，我将假设MovieList希望为其道具电影制作一个数组，然后您可能会尝试执行类似于

.map

或循环的操作来渲染电影

但是，您使用的API不会返回数组。它返回一个对象，该对象在

results

下有一个数组键。因此，在执行setState时，我将其更改为访问

数据

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

//获取电影
fetchMovie=（）=>{
const req=新请求（电影API{
方法：“GET”，
缓存：“默认”
});
获取（请求）。然后（响应=>{
返回response.json（）；
})。然后（数据=>{
控制台日志（数据）；
这是我的国家({
电影：data.results//{
日志（“错误：+err”）；
})
}

下面是一个正在工作的JSFIDLE：


编辑：
在子组件中，不要将道具指定给状态，只需使用道具和默认道具

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

import React，{Component}来自'React'；
导出默认类MovieList扩展组件{
render（）{
const{movieRes=[]}=this.props；//我们在这里分配一个空数组的默认prop。
返回(

{movieRes.map（（电影，索引）=>{
返回(
{movie.title}
);
})}

);
}
}
您能告诉我们您得到的错误吗？如果您能向我们展示响应的结构，这也会有所帮助。抱歉，我没有收到任何错误。是可变电影即使在获取数据后也没有得到任何值，它保留了一个空数组。您确定您的响应是数组吗？可以吗
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>
        );
    }
}