Chakra UI useCheckboxGroup onChange中value为旧值的问题求助

问题描述 #

我正在使用Chakra UI的CheckboxGroup，这是一个支持多选的复选框组组件。原本想用useCheckboxGroup Hook在复选框状态变更时获取当前选中值并传递给其他逻辑，但遇到了问题：onChange回调函数里的value是变更前的旧值，但在回调外部打印的value却是正确的最新状态，导致我没法在onChange里使用最新状态。想请教这是用法错误还是预期行为？

代码示例 #

const { value, getCheckboxProps} = useCheckboxGroup({
    onChange: () => {
        const checkBoxState = value as string[]
        console.log(checkBoxState)
        setSearchParams({ 'category': checkBoxState });
    },
});
console.log(value)

解决方案 #

这是useCheckboxGroup的预期设计，并非用法错误。该Hook的onChange回调会自动接收最新的选中值作为参数，你不需要依赖Hook返回的value（受闭包特性影响，回调里的value会捕获上一轮渲染的旧值）。

修改代码，直接使用回调参数即可获取最新状态：

const { value, getCheckboxProps} = useCheckboxGroup({
    onChange: (newValue) => {
        const checkBoxState = newValue as string[]
        console.log(checkBoxState)
        setSearchParams({ 'category': checkBoxState });
    },
});
console.log(value)

原理：Chakra UI在设计useCheckboxGroup时，会将更新后的选中集合作为参数传入onChange回调，目的就是让开发者直接拿到最新状态，避免闭包导致的旧值问题。

内容的提问来源于stack exchange，提问作者Dusan Stojanovic