如何从3个不同的React状态中删除该项目？

Question

我正在制作一个待办事项应用程序，可让您使用自己的待办事项创建多个列表。 在我的主要应用程序组件上，我具有所有待办事项，所有列表和当前列表的状态。 在删除项目时，我需要将该项目从所有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

我相信您需要在lists子状态上使用.map ：

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