數組中特定對象的設置狀態

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