Ant Design Table中Switch组件状态切换异常问题

核心问题点 #

• Switch未绑定状态：没有给Switch设置checked属性，组件无法感知当前应显示的开关状态，也无法同步数据源的值。
• onChange参数传递错误：Ant Design Switch的onChange回调默认返回当前开关的布尔值，但你传入的是原始的status（数据源旧值），导致每次触发都是基于旧值取反，而非Switch实际的新状态。
• 未更新数据源状态：handleSwitchChange仅修改了局部变量，没有更新组件的dataSource状态，页面不会重新渲染，值始终保持初始状态。

修复步骤 #

1. 将Columns移至组件内部：Columns需要访问组件内的状态和回调，放在外部会存在作用域问题。
2. 绑定Switch的checked状态：通过checked={status}将Switch状态与数据源的suspended字段绑定。
3. 正确传递onChange参数：在onChange中接收Switch返回的新值，同时传入当前行的唯一标识（如record.key），用于定位要更新的行。
4. 更新数据源状态：在handleSwitchChange中，根据行标识找到对应数据，修改suspended字段后，通过setDataSource更新状态。

完整修复代码 #

import React, { useEffect, useState } from 'react'
import { UserServices } from '../../services/UserService';
import { Space, Table, Tag, Divider, Skeleton, Switch } from 'antd';

const Staff = () => {
    const [dataSource, setDataSource] = useState([]);

    // 移至组件内部，确保能访问到回调函数
    const columns = [
        {
            title: 'Phone',
            dataIndex: 'phone',
            key: 'phone',
        },
        {
            title: 'Suspended',
            dataIndex: 'suspended',
            key: 'suspended',
            render: (status, record) => {
                return (
                    <Switch
                        checked={status} // 绑定当前行的开关状态
                        onChange={(newValue) => handleSwitchChange(newValue, record.key)} // 接收新值与行标识
                    />
                )
            }
        },
    ];

    const handleSwitchChange = (newValue, rowKey) => {
        // 更新对应行的suspended值
        setDataSource(prevData => prevData.map(item => {
            if (item.key === rowKey) {
                return { ...item, suspended: newValue };
            }
            return item;
        }));
        // 可在此添加后端同步逻辑
        // UserServices.updateStaffStatus(rowKey, newValue).then(...).catch(...);
    };

    useEffect(() => {
        // 修复useEffect直接使用async的警告问题
        const fetchStaff = async () => {
            try {
                const response = await UserServices.getStaff();
                setDataSource(response.data);
            } catch (error) {
                console.log(error);
            }
        };
        fetchStaff();
    }, []);

    return (
        <>
            <h3>Staffs</h3>
            <Divider />
            {dataSource.length > 0 ? (
                <Table
                    scroll={{ x: 400 }}
                    className="table-striped-rows"
                    columns={columns}
                    dataSource={dataSource}
                />
            ) : (
                <Skeleton active />
            )}
        </>
    )
}

export default Staff;

额外说明 #

• 修复了useEffect直接使用async的警告：useEffect回调不能是async函数，因此包裹了fetchStaff函数处理异步请求。
• 组件名称改为Staff：符合React组件首字母大写的规范。
• 预留后端同步接口：如果需要将开关状态同步到后端，可在handleSwitchChange中调用对应接口，传入行标识和新值。

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