使用扩展语法更新React State时首次选择未同步问题

问题原因 #

1. React的setState是异步操作，调用后不会立刻更新状态，你在setSelectedData后直接console.log(selectedData)，打印的还是更新前的旧值，这就造成了“首次选择状态没更新”的错觉。
2. 直接依赖当前selectedData对象来扩展新状态时，因为闭包的存在，onChange函数捕获的是组件渲染时的旧selectedData，可能导致状态更新不及时。

解决方案 #

1. 改用函数式更新setState

使用函数式更新可以确保获取到最新的状态值，避免闭包带来的旧值问题：

const onChange = (value) => {
    console.log(`selected ${value}`);
    // 传入函数，prevState是最新的状态快照
    setSelectedData(prevState => ({
        ...prevState,
        "bank_code": value
    }));
};

2. 监听状态变化查看最新值

如果需要确认状态更新后的结果，不要在setState后直接打印，而是用useEffect监听状态变化：

import React, { useState, useEffect } from 'react'

export const terr = () => {
    const [selectedData, setSelectedData] = useState({})
    
    // 监听selectedData变化，状态更新后触发
    useEffect(() => {
        console.log(`updated selected data:`, selectedData);
    }, [selectedData]);

    const onChange = (value) => {
        console.log(`selected ${value}`);
        setSelectedData(prevState => ({
            ...prevState,
            "bank_code": value
        }));
    };

    // 其余返回代码不变
}

3. 利用Antd Form的内置状态（可选优化）

因为你已经使用了Antd的Form.Item并设置了name="bank_code"，Form组件本身会维护这个字段的状态，你可以直接通过Form实例的getFieldValue方法获取银行代码，无需额外维护selectedData状态，减少状态冗余：

// 假设你用了Form组件，通过useForm获取实例
import { Form, Select, useForm } from 'antd';

export const terr = () => {
    const [form] = useForm();

    const onChange = (value) => {
        console.log(`selected ${value}`);
        // 直接从Form获取最新值
        console.log(`bank code from form:`, form.getFieldValue('bank_code'));
    };

    return (
        <Form form={form}>
            <Form.Item
                label="Bank Name"
                name="bank_code"
                rules={[{ required: true, message: 'Select your bank name!' }]}
            >
                <Select
                    showSearch
                    placeholder="Select a Bank"
                    optionFilterProp="children"
                    onChange={onChange}
                    onSearch={onSearch}
                    filterOption={filterOption}
                    options={banks}
                />
            </Form.Item>
        </Form>
    )
}

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