Манипулирование состоянием реакции с помощью оператора распространения

#reactjs

#reactjs

Вопрос:

У меня есть это начальное состояние:

 this.state = {
    formInfo: {
        name: '',
        age: '',
        height: ''
    },
    errorMessage: ''
}
  

При редактировании формы состояние должно обновляться, и вот как я справляюсь с этим в данный момент:

 handleInputChange = e => {
    const { name, value } = e.target
    this.setState({
        ...this.state,
        formInfo: {
            ...this.state.formInfo,
            [name]: value
        }
    })
}
  

Можете ли вы предоставить мне лучшее решение для управления состоянием, если этот процесс не соответствует отраслевым стандартам?

Я сомневаюсь, что есть более эффективный способ архивировать это.

Комментарии:

1. Если вы заинтересованы в работе с объектами, намного более сложными, чем ваш пример, вы могли бы изучить immer ( npmjs.com/package/immer ).

Ответ №1:

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

 handleInputChange = e => {
  const {
    target: {
      name = '',
      value = '',
    } = {},
  } = e;

  const {
    formInfo,
  } = this.state;

  this.setState({
    formInfo: {
      ...formInfo,
      [name]: value,
    },
  });
}