React函数组件如何使用useState修改状态，解决点赞后movies.map报错问题

报错根因 #

你遇到的movies.map is not a function错误，本质是数组类型的movies状态被误修改为对象类型：原来你用useState初始化的movies是数组，但是在handleLike方法中调用setMovies时传入了{ movies }，将状态覆盖为了{ movies: 数组 }的对象结构，对象本身不存在map方法，所以渲染时直接抛出异常。

此外handleLike中还存在另外3个编码错误，一并修正：

• 局部变量命名和状态变量movies冲突，受const暂时性死区影响，访问会出现异常
• 拷贝电影对象时错误写为movie[index]，传入的movie是单个电影对象，不是数组，不存在index索引
• 用indexOf匹配数组元素存在引用不一致时匹配失败的隐患，推荐用唯一id匹配更稳妥

修正后的handleLike代码 #

把原来的handleLike方法替换为下方代码即可：

const handleLike = (targetMovie) => {
  // 拷贝原有数组生成新数组，避免直接修改原状态
  const newMovies = movies.map(movie => {
    // 匹配到目标电影时，修改liked属性
    if (movie._id === targetMovie._id) {
      return { ...movie, liked: !movie.liked }
    }
    // 非目标电影直接返回
    return movie
  })
  // 直接传入新数组，不要包裹成对象
  setMovies(newMovies)
};

可选兼容写法 #

如果要保持你原来通过索引修改的写法，也可以改成下面的版本，效果完全一致：

const handleLike = (targetMovie) => {
  const newMovies = [...movies]
  const index = newMovies.findIndex(m => m._id === targetMovie._id)
  newMovies[index] = { ...newMovies[index], liked: !newMovies[index].liked }
  setMovies(newMovies)
};

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