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

Question

I'm making a to-do app that allows you to create multiple lists with their own to-do items. On my main app component I have a state for all of the todos, all of the lists, and the current list. On deleting an item I need the item to be removed from all 3 states. I can easily remove it from the array of all to-do items and the current list. The trouble is removing it from the list in the lists array. Here is the component code that relates to this issue:

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() {
    //...
  }
}

Currently, trying to delete an item removes all lists from the lists array.

Here is a screenshot of the React dev tool to give you an idea of what each state looks like...

Please let me know if I left out any critical information.

Answer 1

I believe you need to use .map on the lists substate:

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