构建Tiktoc克隆应用时点赞按钮报错，请求技术支援

核心错误分析 #

从错误截图来看，问题本质是尝试访问null/undefined对象的liked属性——即便你做了空值处理，大概率是处理的时机或覆盖范围不对。

具体排查&修复步骤 #

• 先确认点赞按钮点击时，要操作的目标视频对象是否存在：
  • 在点击事件函数开头加console.log打印目标视频实例，看触发时是否为null
  • 避免在组件未挂载完成、视频数据未加载完毕时绑定点赞事件
• 空值处理要覆盖所有访问liked的环节：
  • 不要只在一处加判断，渲染点赞状态、更新点赞数的代码都要做校验
  • 示例：把video.liked替换成video?.liked（可选链操作符），或者用if (video) { ... }包裹所有相关逻辑
• 检查状态管理逻辑（如果用了Redux/Context等）：
  • 确认点赞动作触发时，对应的视频数据在全局状态里是否已正确初始化
  • 避免状态更新时误将视频对象置为null
• 核对API请求后的处理：
  • 点赞接口返回的数据是否正确，有没有把liked字段设为null的情况
  • 确保请求成功后更新本地数据时，没有丢失liked属性

临时兜底修复 #

如果暂时找不到根源，可以在点赞函数最开头加兜底判断：

const handleLike = (videoId) => {
  const targetVideo = videos.find(v => v.id === videoId);
  if (!targetVideo) return; // 直接终止，避免后续报错
  // 后续点赞逻辑
}

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