使用扩展运算符更新 usehook 对象时出错

【问题标题】：error in updating usehook object using spread operator使用扩展运算符更新 usehook 对象时出错
【发布时间】：2021-12-28 12:32:43
【问题描述】：

当我在一个对象中有多个相似的键时如何定位一个键。如果我尝试定位我想要的键，它会显示语法错误。

const [modifiedNonFormData, setModifiedNonFormData] = useState({
"author": {
    "lastName": "",
    "location": {
        "latitude": 49.3542671,
        "longitude": 8.133071
    },
    "shippingAddress": {
        "postalCode": "",
        "name": "",
        "address": "",
        "location": {
            "longitude": "",
            "latitude": ""
        },
        "email": "",
        "phone": "+14356234653"
    },
    "phone": "+14356234653",
    "firstName": e.target.value
},})


const phoneHandler = (e) => {
let val = e.target.value
setModifiedNonFormData(modifiedNonFormData => {
    return (
        ...modifiedNonFormData,
        ...modifiedNonFormData.author.phone:val
    )
})}

我正在尝试更新/修改 onChange 输入值

【问题讨论】：

你想改变modifiedNonFormData.author.phone的值吗？
是的，这就是我正在尝试的@Secret

标签： javascript reactjs ecmascript-6

【解决方案1】：

您需要这样做：

setModifiedNonFormData(data => {
    return ({
        ...data,
        author: {
           ...data.author,
           phone: val
        }
    })
})}

说明

您需要在 react 中将一个新对象返回给状态设置器。一种常见的方法是通过对象解构。假设您有 data 并且想要克隆它。你可以这样做：

const newData = { ...data }

这会将data 中的所有值复制到一个新对象。这也是修改数据有效的原因 - 您在复制值的同时还为属性设置了新值：

const newData = { ...data, newProperty: newValue }

但是，此语法仅限于替换属性的值。因此，如果要修改嵌套对象中某个属性的值，也必须在内部使用相同的语法。

【讨论】：