Лучший способ очистить все значения объекта с помощью setState в реагировать

Question

Я использую React. Это мое состояние

state = {
customerData: {
      id: '',
      name: '',
      type: '',
      place: '',
      country: '',
      timezone: 'GMT+5:30',
      status: false
    }
}

Существует функция редактирования, при которой объект customerData заполняется при нажатии кнопки редактирования. Я показываю эти данные в модальном.

Теперь в модале, когда я нажимаю кнопку отправки, модал должен скрыться, и данные, заполненные в объекте customerData , должны быть пустыми. Я могу сделать это так:

this.setState({
customerData: {
      ...this.state.customerData
      id: '',
      name: '',
      type: '',
      place: '',
      country: '',
      timezone: '',
      status: false
    }
}
})

Мне интересно, есть ли в ES6 какой-либо однострочный способ сделать объект customerData пустым. Потому что, если полей будет слишком много, это будет сложно.

Answer 1

Вы можете установить переменную, такую ​​как initialState :

const initialState = {
  customerData: {
      id: '',
      name: '',
      type: '',
      place: '',
      country: '',
      timezone: 'GMT+5:30',
      status: false
  }
}

И прежде чем скрыть модальное, сделайте:

this.setState(initialState)

Answer 2

Вы можете использовать уменьшение, чтобы не полагаться на количество и количество параметров. Это должно выглядеть так

1002 *

Answer 3

Здесь есть два простых варианта:

Создать объект по умолчанию

Над компонентом вы можете создать «пустое» значение для вашего состояния. Например:

const emptyCustomerData = {
  id: '',
  name: '',
  type: '',
  place: '',
  country: '',
  timezone: '',
  status: false,
}

Если вы хотите очистить свой объект состояния, теперь просто позвоните:

this.setState({
  customerData: emptyCustomerData,
})

---

Разрешить все значения customerData для обнуляемости

Вы можете просто установить customerData для пустого объекта:

this.setState({
  customerData: {},
})

Это означает, что перед использованием любого из свойств в вашем коде, вам необходимо проверить undefined:

// This sets myVal to customerData.name, or if name is undefined, to an empty string
const myVal = this.state.customerData.name || ''

Answer 4

Предполагая, что вы хотите сохранить клавиши customerData, для вашего случая использования может быть достаточно установить все на ноль, что упростит сброс:

this.setState(customerData: Object.assign(...Object.keys(this.state.customerData).map(k => ({[k]: null}))))

https://jsfiddle.net/0ymx7fsq/

В качестве альтернативы, поскольку вы используете компоненты класса, вы также можете сохранить начальное состояние в конструкторе:

constructor(props) {
    super(props)
    this.state = initialState;
}
...
reset() {
    this.setState({ customerData : initialState.customerData });
}
...