React TypeScript中onChange时如何正确更新组件状态？

你遇到的错误原因很明确：当前组件是React函数组件（通过React.FC定义），函数组件中不存在this上下文，所以this.setState和this.state这类类组件的写法在这里完全不适用，这就是报错的根源。

修正后的代码 #

统一使用useState返回的setSelectedValues更新状态，同时改用函数式更新（更适合依赖当前状态的更新场景，避免异步更新导致的状态不一致）：

export const CheckboxWindow: React.FC<Props> = props => {
    const [selectedValues, setSelectedValues] = React.useState<string[]>([]);

    return (
        <Window>     
            <CheckboxGroup
                onChange={(checked, value) => {
                    setSelectedValues(prevValues => {
                        if (checked) {
                            // 选中时，值不存在则添加
                            return prevValues.includes(value) ? prevValues : [...prevValues, value];
                        } else {
                            // 取消选中时，过滤掉对应值
                            return prevValues.filter(val => val !== value);
                        }
                    });
                }}
            />
        </Window>
    );
};

关键说明 #

• 函数组件必须用useState返回的状态更新函数修改状态，不能用类组件的this.setState
• 函数式更新的prevValues参数是当前最新的状态值，能规避React状态异步更新带来的逻辑偏差
• 简化了原有的条件判断，让代码逻辑更简洁清晰

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