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警告“未使用变量...”。

对我来说，您的处理方式更易读。

如何在React中使状态不变

1 个答案: