Как изменить состояние хука с вложенными объектами?

Question

Я пытаюсь обновить свое состояние, у меня следующее:

const [values, setValues] = useState({
   exampleValue: 280.0
 });

А вот функция, где я пытаюсь обновить его

function handleValuesChanged(field, value) {
    setValues({
      ...values,
      field: value,
    });
  }

Вот вход

<Input
   {...field}
   classes={{
     root: styles.root,
     input: styles.input,
   }}
   inputProps={{ type: 'number', min: 0 }}
   id={field.name}
   onChange={e => props.handleValues(field.name, e.target.value)}
/>

Вместо изменения значения состояния exampleValue (это имя отправляется в параметре field, а новое значение входит в параметр value), создается новое поле с именем field с новым значением.

Если я вставил exampleValue в жесткий код в функции setValues, он делает то, что я хочу, но когда я пытаюсь использовать параметр field, он создаетновое поле состояния.

Записывая значение 500, я ожидаю, что состояние изменится на:

exampleValue: 500

Вместо этого я получу

exampleValue: 280.0
field: 500

Кто-нибудь знаеткак я могу это сделать?

Answer 1

Вам необходимо использовать значение переменной field в качестве ключа, а не строку "field" =>

setValues({
  ...values,
  [field]: value,
})

Примечание : {field: 1} является сокращением для{"field": 1}, {field} является сокращением для {"field": field}. Подробнее см. Работа с объектами .