点赞按钮实现问题：点击后未切换状态 用户可重复点赞如何解决

问题排查与修复方案 #

1. 点赞请求缺失用户身份认证 #

当前点赞接口请求没有携带用户身份凭证，后端无法识别操作的用户身份，不会将当前用户id写入帖子的likes数组，导致返回的帖子数据无变化，按钮自然不会切换。
修复方法：在请求头中补充认证信息，示例如下：

const likePost = (id)=>{
  // 根据实际存储的登录态字段调整取值逻辑
  const user = JSON.parse(localStorage.getItem("user"))
  fetch('/post/like',{
    method:"put",
    headers:{
      Accept:"application/json",
      "Content-Type":"application/json",
      // 补充认证头，可根据后端的认证规则调整格式
      "Authorization": `Bearer ${user.token}`
    },
    body:JSON.stringify({
      postId:id
    })
  }).then(res=>res.json())
  .then(result=>{
    // 可先打印确认返回的likes是否包含当前用户id
    console.log('点赞后返回的likes数组：', result.likes)
    const newData = data.map(post=>{
      if(post._id===result._id){
        return result
      }else{
        return post
      }
    })
    setdata(newData)
  }).catch(err=>{
    console.log(err)
  })
}

2. id类型不匹配导致判断失效 #

Array.includes()采用严格相等判断，如果posts.likes里存储的id是ObjectId类型，而全局state里的_id是字符串类型，即使值一致也会返回false，导致渲染判断错误。
修复方法：判断前统一转为字符串类型，修改渲染逻辑：

{
  posts.likes.map(id => id.toString()).includes(state._id.toString())
  ? <AiTwotoneDislike size="2em" onClick={()=>{unlikePost(posts._id)}}/>
  : <AiFillLike size="2em" onClick={()=>{likePost(posts._id)}}/>
}

3. 渲染数据源与更新的状态不匹配 #

点赞后你更新的是setdata对应的状态变量，但渲染逻辑里用的是posts变量，请确认posts是否由你更新的data状态派生而来，如果posts来自props、其他独立状态或者常量，更新data自然不会触发重新渲染，需要同步调整更新的状态变量。

4. 后端接口逻辑异常 #

完成上述排查后问题仍存在的话，可查看点赞接口返回的result.likes是否真的包含当前用户的id，如果没有就是后端接口逻辑问题，需要检查后端点赞逻辑是否正确将当前用户id插入likes数组、是否返回了更新后的完整帖子数据。

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