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

Question

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

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

每个按钮都有一个“赞”按钮呈现，当我按我希望它按它喜欢的样子时，当我再次按我按钮时，它应该与之不同

我的initialState是：

  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猫从假更改为真？

我在想这样的事情：

   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);