React调用TMDB API时报items.map is not a function错误如何解决

问题根源 #

TMDB高分电影接口返回的JSON整体是对象类型，并非你之前对接其他接口拿到的直接数组，map是JavaScript数组的专属方法，调用对象的map方法就会触发该报错。

该接口固定返回结构如下，电影列表存放在results字段中：

{
  "page": 1,
  "total_results": 10000,
  "total_pages": 500,
  "results": [/* 电影数据数组 */]
}

你在代码中直接把完整返回对象赋值给了初始为数组的state.items，导致items最终变为对象，调用map自然失败。

修复方案 #

修改componentDidMount生命周期中的setState逻辑，取返回对象的results字段赋值给items即可：
原代码：

.then((res) => {
    this.setState({
        items: res,
        DataisLoaded: true
    });
})

修改后：

.then((res) => {
    this.setState({
        items: res.results,
        DataisLoaded: true
    });
})

可选优化 #

可增加类型兜底判断，避免接口返回结构异常时页面直接崩溃：

.then((res) => {
    this.setState({
        items: Array.isArray(res.results) ? res.results : [],
        DataisLoaded: true
    });
})

内容的提问来源于stack exchange，提问作者AlphaWolf212