Javascript 数组中特定对象的设置状态

我有一个从api中提取的cats数组

我将这些映射并在页面上渲染它们

每一个都用一个like按钮进行渲染，当我想让它喜欢它时，当我再次点击like时，它应该不喜欢它

我的初始状态是：

  state = {
    cats: []
  };

一旦调用api，状态如下所示：

cats: [
    {url: Array(1), id: Array(1), source_url: Array(1), liked: false}
    {url: Array(1), id: Array(1), source_url: Array(1), liked: false}
]

我有一个类似于猫的方法，我可以这样找到我喜欢的猫：

   this.setState(prevState => ({ cats: {
      cat: {
        ...prevState.cat,
        liked: !prevState.cat.liked
      }
    }}))

var cat=this.state.cats.findc=>c.id[0]==cat.id[0]

考虑到我有所有这些信息，我如何调用特定的猫的setState来将喜欢的从false更改为true

我是这样想的：

   this.setState(prevState => ({ cats: {
      cat: {
        ...prevState.cat,
        liked: !prevState.cat.liked
      }
    }}))

但它不知道什么是未定义的

---

有什么想法吗？

您的方法的一个问题是没有prevState.cat

假设未点火的cat存储在cat中：

演示：

var状态； 函数setStatea{ state=Object.assignstate，astate； } 状态={ 猫：[ {url:[0]，id:[1]，源url:[0]，喜欢：false}， {url:[0]，id:[2]，源\ url:[0]，喜欢：false} ] }; var cat=state.cats[1]； setStateprevState=>{ cats:prevState.cats.mapc=>c.id[0]==cat.id[0]？Object.assignc，{liked:！c.liked}:c };

---

console.logstate.cats[1]。喜欢；是正面的吗？应为prevState.cat[0]。已被喜欢。var cat=this.state.cats.findc=>c.id[0]==cat.id[0]中的cat.id[0]是什么？当使用prevstate时，你应该直接改变状态吗？@Omar你是对的，不应该。修正了我的答案。我很清楚，你在猫的数组上映射，通过匹配ID找到一个，然后用object.assign更改猫的喜欢的键，这样就不会直接对它进行变异了？@海象确实如此，但映射会创建一个副本，所以我从不变异prevState，甚至不会间接变异。这是一个更好的实现