这是indexloc提供的服务,不要输入任何密码
Skip to content

[Bug] 评论区点赞状态错误:点击指定楼层按钮导致其他楼层状态异常更新 #139

@555555ggfgg

Description

@555555ggfgg

​Environment​ ] Browser: edge 135.0.3179.98 Device: Windows 10 21H2 x64 ​Problem Description​ 在仿抖音应用的评论区组件中,存在点赞状态与DOM元素绑定错位的严重问题,具体表现为: 当点击第N楼评论的点赞按钮时,目标楼层的爱心图标未触发视觉状态更新(颜色未变红) 与此同时,其他楼层(如首楼)的爱心图标却异常变为红色 数据层状态可能与视图层不同步(需进一步验证) ​技术影响​: 此问题涉及Vue的响应式数据绑定机制失效,可能导致: 用户交互信任度下降 评论区数据污染风险 深层级组件通信异常 ​Reproduction Steps​ 进入任意视频的评论区(需含≥3条评论) 观察初始状态:所有评论的点赞爱心为灰色(未点赞) 点击第三条评论的点赞按钮 ​实际结果​: 第三条评论的爱心保持灰色 第一条评论的爱心变为红色 Network请求显示点赞API实际作用于第三条评论ID ​预期结果​: 仅第三条评论的爱心变红且点赞数+1 其他楼层状态保持不变 ​Technical Analysis​ 可能原因: ✅ ​v-for列表渲染key缺失​ 未对评论列表使用唯一标识符(如comment.id)作为key,导致Vue的虚拟DOM复用机制错误 ✅ ​响应式数据引用错误​ 点赞状态可能存储在父级数组对象中,但未通过索引正确绑定(如直接修改this.comments[index].isLiked未触发响应式更新) ✅ ​事件处理器作用域污染​ 点击事件可能错误捕获了首条评论的索引(闭包陷阱或循环变量污染)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions