Material-UI ToggleButtonGroup onChange本地状态更新延迟问题排查

算力阿峰

2026-8-1

问题原因与解决方案

你的代码本身没有功能错误，UI显示正常就说明状态更新逻辑是正确的。控制台输出出现"延迟"的核心原因在于React的状态更新是异步执行的：

当你调用setValues(newValues)时，React不会立刻修改values变量，而是将更新任务加入队列，等待合适时机触发组件重新渲染。
在当前onChangeHandler的执行周期里，values仍然指向更新前的旧状态值，所以你看到的日志会滞后一步。

验证与修正日志方式

如果你想看到实时更新后的状态，可以通过useEffect监听values的变化：

import { useEffect } from 'react';

export default function ToggleButtons() {
    const [values, setValues] = useState(()=>[]);

    const onChangeHandler =(event: any,newValues: string[]) => {
        setValues(newValues);
        console.log('newValues', newValues);
        // 这里的values仍是更新前的旧值
      };

    // 监听values变化，每次状态更新后都会触发
    useEffect(() => {
        console.log('更新后的state values:', values);
    }, [values]);
    
    return (
        <ToggleButtonGroup
            value={values}
            onChange={onChangeHandler}
        >
            <ToggleButton value='first' >first</ToggleButton>
            <ToggleButton value='second' >second</ToggleButton>
            <ToggleButton value='third' >third</ToggleButton>
        </ToggleButtonGroup>
    );
}

这样修改后，每当values完成更新并触发组件重新渲染时，useEffect里的日志就会输出最新的状态值，和UI显示保持一致。