跟随Lama Dev教程遇Cannot read properties of undefined (reading 'includes')错误求助

出现这个错误的核心是你调用includes()方法的对象处于undefined状态，具体可能是以下几种情况：

• data变量未定义或赋值错误

  1. 变量名写错：对比教程源码，原逻辑中使用的是存储点赞用户ID的数组post.likes，你误将其写成了data，导致该变量不存在。
  2. 异步数据未加载完成：如果data是接口请求返回的数组，组件首次渲染时请求还未完成，data初始值为undefined，此时调用includes就会触发报错。
  3. 数据传递异常：父组件没有将对应的数组数据通过props传递给当前组件，或者props字段名与预期不匹配。

• currentUser未正确初始化
  虽然错误提示指向includes，但如果currentUser本身是undefined，访问currentUser.id也会引发连锁问题。需要确认用户状态是否已正常获取，比如是否在未登录状态下就渲染了该组件。

临时修复方案 #

可以通过可选链操作符?.避免报错，保证组件正常渲染：

{data?.includes(currentUser?.id) ? (
  <FavoriteOutlinedIcon style={{color: "red"}} />
) : (
  <FavoriteBorderOutlinedIcon />
)}

但更关键的是排查data未定义的根源：核对教程中的变量命名、检查异步数据的加载逻辑、确认props传递是否正确。

内容的提问来源于stack exchange，提问作者Lama Dev Student