Как сделать государство неизменным в React

Question

Я ищу лучший способ сделать мою функцию handleSwitch + setState неизменной. Код, который у меня есть, работает, но он изменчив, и я не уверен, как сделать его неизменяемым. Все, что я пробовал, либо не работает, либо выдает синтаксическую ошибку.

Это мое инициализируемое состояние

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

У меня есть простой <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

просто для пояснения: ваш код в настоящее время в порядке, он не изменяет состояние напрямую, а изменяет копию.

, но если вы хотите использовать это по-другому, вот шаблон:

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

или с деструктуризацией:

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

В любом случае, к сожалению, нет способа избежать введения unusedVariable при деструкции. Так что вам нужно будет подавить предупреждение ESLint «переменная ... не используется».

Для меня ваш способ обработки лучше читается.