数组中特定对象的Setstate

Question

我有一个从 api

中提取的猫数组

我映射这些并将它们呈现在页面上

每一个都带有一个赞按钮，当我点赞时，我希望它喜欢它，当我再次点赞时，它应该不喜欢它

我的初始状态是：

  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}
]

我有一个点赞猫的方法，我可以这样找到我喜欢的猫：

var cat = this.state.cats.find(c => c.id[0] === cat.id[0])

考虑到我掌握了所有这些信息，我该如何为那只特定的猫调用 setState 以将 liked 从 false 更改为 true？

我在想这样的事情：

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

但它不知道什么liked is of undefined

有什么想法吗？

Answer 1

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

假设（不）喜欢的猫存储在 cat:

this.setState(prevState => ({
    cats: prevState.cats.map(c => c.id[0] === cat.id[0] ? Object.assign(c, { liked: !c.liked }) : c)
}));

演示：

var state;

function setState(a) {
  state = Object.assign(state, a(state));
}

state = {
  cats: [
      {url: [0], id: [1], source_url: [0], liked: false},
      {url: [0], id: [2], source_url: [0], liked: false}
  ]
};

var cat = state.cats[1];
setState(prevState => ({
  cats: prevState.cats.map(c => c.id[0] === cat.id[0] ? Object.assign(c, { liked: !c.liked }) : c)
}));

console.log(state.cats[1].liked);

数组中特定对象的Setstate

Setstate of specific object in array

javascript

setstate

reactjs