（Vuejs）添加喜欢和删除喜欢不起作用答案

【问题标题】：(Vuejs) add like and remove like does not work（Vuejs）添加喜欢和删除喜欢不起作用
【发布时间】：2021-05-29 11:14:09
【问题描述】：

like 切换无法正常工作

    addLike: (state, like) => {
      let posts = state.posts;
      for (let i = 0; i < posts.length; i++) {
        if (posts[i]._id == like.post) {
          if (posts[i].likes.findIndex((el) => el._id === like._id) === -1) {
            posts[i].likes.push(like);
          }
        }

      }
    },

    removeLike: (state, like) => {
      let posts = state.posts;
      
      for (let i = 0; i < posts.length; i++) {
        if (posts[i]._id == like.post) {
          if (posts[i].likes.findIndex((el) => el._id === like._id) === -1) {
            posts[i].likes.splice(posts[i].likes.indexOf(like), 1);
           
          }
        }
      }
    }

【问题讨论】：

stackoverflow.com/help/how-to-ask

标签： javascript vue.js vuex

【解决方案1】：

如果不复现问题，很难说是什么问题，但我在removeLike() 中看到了一些问题：

if 条件检查like 是否不存在（findIndex 在未找到时返回-1）：

if (posts[i].likes.findIndex((el) => el._id === like._id) === -1) {
                                                          ^^^^^^

但应该是相反的：

if (posts[i].likes.findIndex((el) => el._id === like._id) >= 0) {

like 是一个对象，因此indexOf(like) 将始终返回-1，而splice(-1, 1) 将删除数组的最后一项，如果预期的@987654332 可能会出乎意料@ 实际上不是最后一项：
```
posts[i].likes.splice(posts[i].likes.indexOf(like), 1);
                                             ^^^^
```
要修复该错误，请缓存来自findIndex 的索引，并在随后的splice 中使用它：
```
const likeIndex = posts[i].likes.findIndex((el) => el._id === like._id) 
if (likeIndex >= 0) {
  posts[i].likes.splice(likeIndex, 1);
}
```

假设like 仅与单个post 相关，则addLike() 和removeLike() 中的for 循环在相关break 修改后应该break：

for (let i = 0; i < posts.length; i++) {
  if (posts[i]._id == like.post) {
    // add or remove like...

    break;
  }
}

【讨论】：