javascript - react Hook : How do I update state on a nested object with useState()?

Question

我有一个接收如下 prop 的组件:

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 值已更新。我是解构新手，所以我在这里做错了什么？

Answer 1

您还需要使用扩展语法来复制字体对象属性。另外，在尝试根据先前状态更新当前状态时，请使用回调模式

<RadioButtonGroup
  onChange={(event) => { 
    setStyle(prevStyle => ({
        ...prevStyle,
        font: { ...prevStyle.font, align: event.target.value }
    }));
    console.log(style);
  }}
/>