Question

我有一个猫咪数组，我从api

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

每个人都用类似的按钮进行渲染，当我按下它时我想要它喜欢它，当我再次点击它时，它应该不像它

我的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])

考虑到我拥有所有这些信息，我如何调用该特定cat的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

1 个答案: