如何从3种不同的React状态中删除此项？

Question

我正在创建一个待办事项应用，允许您使用自己的待办事项创建多个列表。在我的主应用程序组件上，我有一个所有todos，所有列表和当前列表的状态。在删除项目时，我需要从所有3个州中删除该项目。我可以轻松地从所有待办事项和当前列表的数组中删除它。麻烦的是将其从列表数组中的列表中删除。以下是与此问题相关的组件代码：

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      todos: [],
      lists: [],
      currentList: ''
    };
    this.deleteItem = this.deleteItem.bind(this);
    //...
  }

  //...

  deleteItem(itemId) {
    this.setState(prevState => ({
      todos: prevState.todos.filter(item => itemId !== item.id),
      lists: prevState.lists.find(list => list.id === this.state.currentList.id).todos.filter(item => itemId !== item.id),
      currentList: prevState.currentList.todos.filter(item => itemId !== item.id)
    }));
  }

  render() {
    //...
  }
}

目前，尝试删除项目会删除列表数组中的所有列表。

以下是React开发工具的屏幕截图，让您了解每个州的状况......

如果我遗漏了任何重要信息，请告诉我。

Answer 1

我认为您需要在.map子状态上使用lists：

lists: prevState.lists.map(list => ({
  ...list, // or "id: list.id, text: list.text," if you are not ok with spread operator
  todos: list.todos.filter(item => itemId !== item.id)
}))