React函数组件状态更新异常：无法向子组件传递正确状态

问题场景 #

组件初始化状态如下：

const [selectedSection, setSelectedSection] = useState('section1');
const [section, setSection] = useState({
    section1: false,
    section2: false,
    section3: false
});

点击切换板块时调用：

const onSectionChange = (id) => {
    setSelectedSection(id);
}

useEffect(() => {
    // 以下写法有误
    setSection({
        section1: false,
        section2: false,
        section3: false
    });
    setSection({...section, [selectedSection]: true});
}, [selectedSection]);

将section传递给子组件：

<MyChildComponent section={section} />

发现子组件无法获取正确的选中状态，问题出在useEffect中的setSection写法。

错误原因 #

1. React的状态更新是异步批量处理的，连续两次调用setSection会被合并，最终只执行最后一次更新。
2. 第二次setSection使用的section是当前闭包中的旧状态，不是第一次更新后的状态，所以最终结果会基于初始值覆盖，导致选中状态设置错误。

正确处理方式 #

方案一：使用函数式状态更新（保留原有双状态结构） #

利用React的函数式更新，确保每次更新都基于最新的状态：

useEffect(() => {
    setSection(prevState => {
        // 先重置所有板块为false
        const resetState = Object.fromEntries(
            Object.keys(prevState).map(key => [key, false])
        );
        // 设置当前选中的板块为true
        return {...resetState, [selectedSection]: true};
    });
}, [selectedSection]);

或者更简洁的固定板块写法：

useEffect(() => {
    setSection({
        section1: selectedSection === 'section1',
        section2: selectedSection === 'section2',
        section3: selectedSection === 'section3'
    });
}, [selectedSection]);

方案二：移除冗余的section状态（更推荐） #

实际上section状态完全可以通过selectedSection派生出来，不需要单独维护，这样能避免状态不同步的问题：

// 移除section状态定义
const [selectedSection, setSelectedSection] = useState('section1');

// 直接派生需要传递给子组件的section对象
const section = {
    section1: selectedSection === 'section1',
    section2: selectedSection === 'section2',
    section3: selectedSection === 'section3'
};

// 点击事件无需修改
const onSectionChange = (id) => {
    setSelectedSection(id);
};

// 传递给子组件
<MyChildComponent section={section} />

这种方式既简化了代码，又从根源上避免了状态不同步的问题，因为section始终与selectedSection保持一致。

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