为什么我的状态是异步更新我的上下文？[副本]

Question

我有一个组件，可以创建三个单选按钮。Cicking one应该更新我在别处的上下文存储。

我的状态是这样的：

const styles = {
    font: {
        size: {
            value: '22',
            unit: 'px'
        },
        weight: 'bold',
        color: '#663300',
        family: 'arial',
        align: 'center'
    }
};

我将状态存储为：

const myContext = useEmailContext();
const { ...styling } = styles;
const [style, setStyle] = useState({ styling });

然后我的组件触发函数onChange：

return (
    <RadioButtonGroup
        onChange={(event) => {
            setIsChecked({ checked: event.target.value });
            setStyle({ ...styling,  font: { ...styling.font, align: event.target.value } });
            console.log(style);
            myContext.setStyles(style);
        }}
    />

当我单击一个按钮时，函数将启动，但console.log将显示以前的状态，而不是新更新的状态。同样，我的上下文也会落后一步更新。

这到底是怎么回事？

Answer 1

状态更新与useState钩子更新程序是异步的。你可以在这篇文章中阅读更多关于它的信息：

useState集合方法不能立即反映更改

但是，您可以像这样解决上下文值更新问题

return (
    <RadioButtonGroup
        onChange={(event) => {
            setIsChecked({ checked: event.target.value });
            const newStyle = { ...styling,  font: { ...styling.font, align: event.target.value } }
            setStyle(newStyle);
            myContext.setStyles(newStyle);
        }}
    />
)

或者，您可以使用使用效果钩子更新上下文值，如

useEffect(() => {
     myContext.setStyles(styling);
}, [styling]);

return (
    <RadioButtonGroup
        onChange={(event) => {
            setIsChecked({ checked: event.target.value });
            setStyle({ ...styling,  font: { ...styling.font, align: event.target.value } });
        }}
    />
)

Answer 2

Shubham Khatri的回答应该如预期的那样有效，但最干净的解决方案是使用useEffect（）挂钩：

useEffect(() => {
    // this is the place to update your context, and it will work every time style is updated, everytime, everywhere.
}, [style]);

这将阻止您在发生更改时手动更新上下文。