获取API后未定义值，React
我正在使用unable构建一个简单的电影目录，但是我面临着一个我无法解决的问题。问题是抓取后的结果总是不确定的。
我尝试使用方法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方法来获取数据，但它不起作用。同样值得注意的是，如果我记录数据(参考文献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应该在检测到变化时立即呈现，但由于某种原因，它不是这样的。
从图像中可以看到，当我将数组从父组件传递给子组件时，数组长度是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;回答 1
Stack Overflow用户
发布于 2018-01-28 05:18:17
最初，我误解了您的问题，但在重新阅读之后，我注意到您在构造函数中将电影定义为数组。
如果没有实际的错误消息，我将假设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/
编辑:在子组件中，不是将道具分配给状态，而是使用道具和默认道具。
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>
);
}
}https://stackoverflow.com/questions/48480508
复制相似问题
腾讯云开发者
