如何在 React 中使 state 不可变

Question

I am looking for the best way to make my handleSwitch + setState function immutable. The code I have currently works but is mutable and I am unsure how to make it immutable everything I have tried either doesn't work or gives me a syntax error.

This is my state being initialised

this.state = {
      contacts: [],
      filteredContacts: [],
      selected: [],
      contactsSelection: {},
      loading: false,
    };

I have a simple <Switch /> comp which triggers the below when a user toggles the switch.

handleSwitch = async (contact, added) => {
    if (added) {
      console.log('added', { contact, added });
      return this.setState(prevState => ({
        contactsSelection: {
          ...prevState.contactsSelection,
          [contact.id]: contact,
        },
      }));
    }

    console.log('removed', { contact, added });
    // const { contactsSelection } = this.state;
    return this.setState(prevState => {
      const existingSelection = { ...prevState.contactsSelection };
      delete existingSelection[contact.id]; // <-- make immutable
      return { contactsSelection: existingSelection };
    });
  };

Answer 1

just to clarify: your code is fine by now, it does not mutate state directly but mutates copy.

but if you'd like having that in different way, here is a pattern:

this.setState(prevState => {
      const { [contact.id]: unusedVariable, ...restContacts } =
          prevState.contactsSelection;
      return { contactsSelection: restContacts };
})

or with destructuring:

this.setState(
  ({ contactsSelection: {[contact.id]: unused, ...filteredContact} })) => 
      ({ contactsSelection: filteredContacts })
);

Anyway unfortunately there is no way to avoid introducing unusedVariable while destructuring. So it will need you to suppress ESLint warning "variable... is not used".

To me, your way handling that is better readable.