如何使用嵌套对象更改状态挂钩？

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}的简写。有关更多详细信息，请参见Working with Objects。