设置嵌套数组的状态

Question

我有这个类:

class Board {
    this.state = {
        lists : [{
            id: 0, 
            title: 'To Do',
            cards : [{id : 0}]
        }]
    }

我想在“lists”状态数组内部使用“cards”数组上的setState。以前，我的卡片数组在子组件中，但现在我已将其移至Board类中。这是我之前拥有的功能。

deleteCards(id){
    this.setState({
        cards: this.state.cards.filter(card => card.id !== id)
    });
}

如何更改代码使其在cards嵌套在另一个数组中时也能正常工作？

我查看了以下帖子，但仍然无法解决：

ReactJS - setState of Object key in Array

How to edit an item in a state array?

- Chick Evans

Answer 1

如果要在setState内完成所有操作（请注意，setState的第一个参数是一个更新函数，其中它的第一个参数是对先前状态的引用）：

如果您可以从调用者提供listId：

deleteCards(listId, cardId) {
  this.setState(prevState => ({
    lists: prevState.lists.map((list) => {
      if (list.id !== listId) {
        return list
      }

      return {
        ...list,
        cards: list.cards.filter(card => card.id !== cardId) 
      }
    })
  }))
}

如果调用者无法提供 listId：

deleteCards(id) {
  this.setState(prevState => ({
    lists: prevState.lists.map((list) => {
      if (list.cards.some(card => card.id === id)) {
        return {
          ...list,
          cards: list.cards.filter(card => card.id !== id) 
        }
      }

      return list
    })
  }))
}

- chrisbot

---

使用此函数不会导致错误，但也不会发生任何事情。deleteCards被传递到一个按钮中，在onClick中调用它。我可以确认该按钮正在工作，因为它会写入控制台。 - Chick Evans

我意识到我做出的假设是要删除的卡片的 id 与它所在列表的 id 是相同的。您能否也将列表的 id 提供给此函数？如果不能，该函数将不得不遍历每个列表，直到找到具有提供的 id 的卡片。 - chrisbot

我已更新我的答案以反映两种可能性。 - chrisbot

谢谢，我能够传递两个ID并且它按预期工作。如果我想要添加到“card”数组，'prevState'更新器函数是否是必需的？例如，更新deleteCards函数并将filter替换为cards：list.cards.concat([{id：cID}])？我想是这样的。 - Chick Evans

在 setState 中访问状态时，通常最佳实践是使用对先前状态的引用。此外，我建议避免使用 concat 来改变 list.card 数组，而是使用扩展运算符 (...)，像这样：cards: [...list.cards, {id: cID}]。 - chrisbot

Answer 2

你应该尝试使用新的rest和spread语法...

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

const newListItem = {this.state.lists[0].cards.filter....} 

this.setState({lists: [...this.state.lists.cards, newListItem]})

我本来想把这个作为注释，但是那样会很难阅读。这只是一个例子，你需要实际编写一个过滤器。

- Gavin Thomas

---

这段代码在const newListItem后返回了“this is a reserved word error”（我已经用上面写的filter替换了原来的filter...）。是否有语法可以修复这个问题？ - Chick Evans