Question

我上了这个课：

，并且要在“列表”状态数组内的“卡”数组上使用setState。以前，我在子组件中拥有纸牌阵列，但现在将其移至Board类。这是我以前拥有的功能。

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

我如何更改它，使其在卡位于另一个阵列中时可以正常工作？

通过查看这些帖子，我无法解决它：

ReactJS - setState of Object key in Array

How to edit an item in a state array?

Answer 1

要在setState中完成所有操作（请注意，setState的第一个参数是一个更新程序函数，其中其的第一个参数是对先前状态的引用）：< / p>

如果您可以提供来自呼叫者的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
    })
  }))
}

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

我会对此发表评论，但很难阅读。这只是您实际上需要编写过滤器的一个示例。

设置嵌套数组的状态

2 个答案: