Question

我有一个创建三个单选按钮的组件。选择一个应该更新我在其他地方拥有的上下文存储。

我的状态如下：

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 hooks更新器异步。您可以在这篇文章中了解更多信息：

useState set method not reflecting change immediately

但是您可以解决

这样的上下文值更新

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挂钩更新上下文值

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（）钩子：

@Dao
interface ArticleDao {
    @Query("SELECT * FROM articles WHERE id = :age")
    fun getArticleForAge(age: Int): Article
}

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

为什么我的React useState异步更新我的上下文？

2 个答案: