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

Posted 2023-02-22

【中文标题】使用扩展运算符更新 usehook 对象时出错

【英文标题】：error in updating usehook object using spread operator

【发布时间】：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": "[phone]"
    ,
    "phone": "[phone]",
    "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

【参考方案1】：

您需要这样做：

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

说明

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

const newData =  ...data 

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

const newData =  ...data, newProperty: newValue 

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