javascript - React hooks:如何使用 useState() 更新嵌套对象的状态?
问题描述
我有一个组件接收如下所示的道具:
const styles = {
font: {
size: {
value: '22',
unit: 'px'
},
weight: 'bold',
color: '#663300',
family: 'arial',
align: 'center'
}
};
我正在尝试更新align
属性,但是当我尝试更新对象时,我最终只用align
属性替换了整个对象。
这就是我更新它的方式:
const { ...styling } = styles;
const [style, setStyle] = useState(styling);
return (
<RadioButtonGroup
onChange={(event) => {
setStyle({ ...style, font: { align: event.target.value } });
console.log(style);
}}
/>);
当我 console.logstyle
我刚{"font":{"align":"left"}}
回来。我希望看到具有更新值的整个对象align
。我是解构新手,所以我在这里做错了什么?
解决方案
您还需要使用扩展语法来复制字体对象属性。此外,在尝试根据先前更新当前状态时,使用回调模式
<RadioButtonGroup
onChange={(event) => {
setStyle(prevStyle => ({
...prevStyle,
font: { ...prevStyle.font, align: event.target.value }
}));
console.log(style);
}}
/>
推荐阅读
- office-js - 如何在 Office `Dialog API` 中使用`Word.run(function (context) {`
- laravel - 复选框不保存真实值
- bash - 检查 SeLinux 状态
- php - SQL Server:Windows 身份验证从 Management Studio 而非 Apache 工作
- node.js - 从 Knex.js 池中获取当前正在执行的查询
- java - Java中的线程执行
- angular-material - 如何知道Angular 6材料MatTable中选定单元格的索引?
- javascript - 检查数组是否有三个连续的数字
- android-studio - Android Studio 设备文件资源管理器在下载文件时卡住
- python - Visual Studio 2017 的 Python 工具