如何更改嵌套对象的状态挂钩

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}的缩写。有关详细信息，请参见使用对象。