React.JS,TypeError:this.state.movies.map不是一个函数问题
2019-11-20
317
// 我英文不好,请谅解。
当您尝试通过从api接收数据来使用地图时,由于类型错误而发帖寻求解决方案。
我写的代码有什么问题?
.then(data =>
This.setState({
movie: data.boxOfficeResult,
List: data.boxOfficeResult.dailyBoxOfficeList,
Date: data.boxOfficeResult.ShowRange,
Type: data.boxOfficeResult.box OfficeType
})
);
是这个原因吗?
我正在练习如何使用api。很难。
class MoviesCall extends React.Component {
state = {
movies: [],
list: [],
Date: "",
Type: ""
};
componentDidMount = async () => {
await axios
.get(endPoint)
.then(res => res.data)
.then(data =>
this.setState({
movies: data.boxOfficeResult,
list: data.boxOfficeResult.dailyBoxOfficeList,
Date: data.boxOfficeResult.showRange,
Type: data.boxOfficeResult.boxofficeType
})
);
console.log(this.state.movies);
console.log(this.state.list);
console.log(this.state.Date);
console.log(this.state.Type);
};
render() {
return (
<div>
{this.state.movies.map(movie => (
<div key={movie.id}></div>
))}
</div>
);
}
}
3个回答
您可能忽略了数据未完成加载的情况。此时您的
render
函数应如下所示:
render() {
const { movies } = this.state;
if (!movies || !Array.isArray(movies))
return null;
return (
<div>
{movies.map(movie => (
<div key={movie.id}></div>
))}
</div>
);
}
Duc Hong
2019-11-20
从这个区块我发现了 3 个问题
1)
This
应该是
this
2)
movie
应该是
movies
3)
List
应该是
list
.then(data =>
This.setState({
movie: data.boxOfficeResult,
List: data.boxOfficeResult.dailyBoxOfficeList,
Date: data.boxOfficeResult.ShowRange,
Type: data.boxOfficeResult.box OfficeType
})
);
tareq aziz
2019-11-20
在设置状态之前,请在控制台中记录数据并查看它是否为数组。您使用的是“This”吗?应该是“this”
.then(data =>
console.log(data)
this.setState({
movie: data.boxOfficeResult,
List: data.boxOfficeResult.dailyBoxOfficeList,
Date: data.boxOfficeResult.ShowRange,
Type: data.boxOfficeResult.box OfficeType
})
);
RenJith
2019-11-20