React.JS，TypeError:this.state.movies.map不是函数Issue

Question

//我英语不好，请理解。

当您试图通过从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>
);
}
}

Answer 1

当数据加载未完成时，可能会错过这种情况。此时，您的render函数应该是这样的：

render() {
const { movies } = this.state;
if (!movies || !Array.isArray(movies))
return null;
return (
<div>
{movies.map(movie => (
<div key={movie.id}></div>
))}
</div>
);
}

Answer 2

从这个块中，我发现了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
})
);

Answer 3

在设置状态之前，将数据记录在控制台中，并查看其是否为数组。你在用"这个"吗？应该是"这个">

.then(data =>
console.log(data)
this.setState({
movie: data.boxOfficeResult,
List: data.boxOfficeResult.dailyBoxOfficeList,
Date: data.boxOfficeResult.ShowRange,
Type: data.boxOfficeResult.box OfficeType
})
);