Динамическое создание объекта внутри другого объекта

Question

У меня есть это в конструкторе

this.state = {
  inputs : {}
}

Это в handleInputChange (вызвано размытием ввода)

handleInputChange(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;

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

Так что мое состояние будет выглядеть как

inputs : { name1 : "text1", "name2": "text2" }

Я получаю эту синтаксическую ошибку

 Unexpected token, expected , (20:12)

this.setState({
> 20 |       inputs[name]: value
     |             ^
  21 |     });

Какой правильный синтаксис для этого?

Answer 1

Хотя вышеприведенное сработает, лучше управлять состоянием в группе «меньших» свойств, чем в одном большом объекте.Причина в том, что все, что зависит от свойства состояния верхнего уровня (т.е. входных данных), обновляется каждый раз, когда оно изменяется.Если вы сделаете каждый вход его собственным свойством непосредственно в состоянии, вам придется меньше обновлять, и это должно быть быстрее (в этом случае это может быть незаметно).

handleInputChange(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;
    this.setState({name: value});
}

Answer 2

Я считаю, что проблема в том, что переменная inputs не инициирована.

это должно работать

handleInputChange(event) {
const target = event.target;
const value = target.value;
const name = target.name;
let inputs = {}
this.setState({
  inputs[name]: value
});

}

Answer 3

handleInputChange(event) {
  const target = event.target;
  const value = target.value;
  const name = target.name;
  let updatedInputs = this.state.inputs;
  updatedInputs[name]= value;
  this.setState({
    inputs: updatedInputs
  });
}

Answer 4

Вместо передачи литерала Object, вместо этого передайте ссылку на объект.

При этом вы можете добавить вычисляемое (или частично вычисленное) свойство к объекту перед его передачей.

handleInputChange(event) {
  const target = event.target;
  const value = target.value;
  const name = target.name;
  let state = {inputs: this.state.inputs};
  state.inputs[name] = value

  this.setState(state);
}