React函数组件中state存储的对象数组调用map方法报.map is not a function错误

你触发错误的核心原因是movies的state初始值类型错误：

• 你给useState传入的初始值是空字符串''，字符串原型上不存在map方法。
• React组件首次渲染时，useEffect内的接口请求还未返回，此时movies是字符串类型，你直接调用movies.map就会抛出类型错误。
• 你在控制台看到movies打印为数组，是因为控制台打印的引用类型值会同步更新为最终的内存值：接口返回后你更新了movies为数组，控制台的打印结果也同步刷新为数组，掩盖了首次渲染时movies为字符串的实际状态。

• 最直接的修复方式是把movies的初始值改为空数组：

// 把初始值从 '' 改为 []
const [movies, setMovies] = useState([])

• 为了避免接口返回的data.results不是数组的极端情况，你可以在更新state时加一层类型校验兜底：

ApiPopularMovies().then((data) => {
  // 校验返回结果是数组才赋值，否则兜底为空数组
  setMovies(Array.isArray(data.results) ? data.results : [])
})

• 调用map前也可以加类型判断进一步增强鲁棒性：

// 写法1：可选链+空值兜底
(movies ?? []).map(item => console.log(item))
// 写法2：显式校验数组类型
Array.isArray(movies) && movies.map(item => console.log(item))

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