[英]React hooks: How do I update state on a nested object with 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.log style
我只会得到{"font":{"align":"left"}}
回来。 我希望看到整个对象具有align
的更新值。 我是解构的新手,所以我在这里做错了什么?
您还需要使用扩展语法来复制字体对象属性。 此外,在尝试根据以前更新当前状态时,请使用回调模式
<RadioButtonGroup
onChange={(event) => {
setStyle(prevStyle => ({
...prevStyle,
font: { ...prevStyle.font, align: event.target.value }
}));
console.log(style);
}}
/>
这是你的错误
setStyle({
...style,
font: { align: event.target.value } // This code replace the font object
});
要保留所有font
对象值,您可以这样做
const onChange = (event) => {
const s = {...style};
s.font.align = event.target.value;
setStyle(s);
}
或者
const onChange = (event) => {
setStyle({
...style,
font: {
...style.font, // Spread the font object to preserve all values
align: event.target.value
}
});
}
如果嵌套对象中有多个值,请尝试以下方法:
setPost({
...post,
postDetails: {
...post.postDetails,
[event.target.name]: event.target.value,
},
});
您可以通过这种方式更新样式
onChange={(event) => {
const s = {...styles};
s.font.align = event.target.value;
setStyle(s);
console.log(style);
}}
您的默认 useState 代码无效。 对于默认的 useState,您应该像下面这样写:
const { ...styling } = styles;
const [style, setStyle] = useState({ styling }); // styling should be use in {}
return (
<RadioButtonGroup
onChange={event => {
setStyle({
...styling,
font: { ...styling.font, align: event.target.value }
});
console.log(style);
}}
/>);
演示:用console.log
检查这个演示。
第一: const { ...styling } = styles;
等同于: const styling = styles;
但是你可以完全跳过它,只需使用[...] = useState(styles)
setStyle()
接受一个接收当前状态的函数,在你的案例风格中。 因此,您可以使用扩展运算符...
来创建新对象并向其添加值。
setStyle(style => ({ ...style, font: { ...style.font, align: event.target.value } ) ) );
上面的代码使用了箭头函数,这也可以写成一个普通的函数,但可能更容易理解:
setStyle( function (style) {
return {
...style,
font: {
...style.font,
align: 'center'
}
}
});
setStyle
console.log
显示当前样式,因为在下次渲染时会看到更改的样式。 所以我在返回之前移动了console.log
。
const [style, setStyle] = useState(styles);
console.log(style);
return (
<RadioButtonGroup
onChange={(event) => {
setStyle(style => ({ ...style, font: { ...style.font, align: event.target.value } ) ) );
}}
/>);
这里有一些链接可以帮助您理解所有这些:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.