Как установитьState () в цикле с использованием оператора распространения

Question

Я пытаюсь установить новые значения для нескольких полей во вложенном объекте в состоянии, используя оператор распространения в цикле, но он работает только для последнего поля.

У меня есть массив "formFields" с именами полейкакие значения я хочу перезаписать.Я использую map () для сравнения каждого элемента в массиве с полем в состоянии и переключаю его значение на «true».Но это меняет значение только для последнего поля в массиве - «комментарий».

constructor() {
    super();
    this.state = {
        fields: {
            time: false,
            date: false,
            quantity: false,
            comment: false,
        },
    }
}

getFormFields() {
    const formFields = ["time", "quantity", "comment"];
    formFields.map(item => {
        this.setState({
            ...this.state.fields,
            [item]: true
        })
    });
}

Что я должен сделать, чтобы перезаписать значения для всех полей, которые я хочу?

Answer 1

Так как вы изменяете состояние в цикле, и каждое установленное вами состояние содержит исходный элемент только с измененным, последнее изменение отменяет предыдущее.Вместо этого создайте новый объект состояния с изменением, а затем setState объект один раз:

getFormFields() {
  const formFields = ["time", "quantity", "comment"];
  this.setState(formFields.reduce((r, item) => ({
    ...r,
    [item]: true
  }), {}));
}

btw - если поля, которые вы хотите установить в true, всегда одинаковы, вы можете создать объектвручную, и установите его:

getFormFields() {
  this.setState({
      time: true,
      quantity: true,
      comment: true,
  });
}