React+Ant Design Table使用useState配置列时表头复选框无法选中

在通过useState管理Ant Design Table列配置的场景下，需要在表头嵌入Checkbox组件，当前遇到异常：点击复选框时，onChange绑定的checkBox状态值已正常更新为true，但复选框视觉上始终无法切换为选中状态。

import React from 'react';
import 'antd/dist/antd.css';
import { Button, Checkbox, Form, Input,Space,Table } from "antd";
const App = () => {
 const [checkBox,setCheckBox]=React.useState(false)
 const [columns,setColumns] = React.useState([
     {
       title: 'Name',
       dataIndex: 'name',
       key: 'name',
},
{
  title: ()=>{
    return (
      <>
      <Space>
        age
        <Checkbox onChange={(e)=>setCheckBox(e.target.checked)} 
        checked={checkBox}
        />
      </Space>
      </>
    )
  },
  dataIndex: 'age',
  key: 'age',
},
{
  title: 'Address',
  dataIndex: 'address',
  key: 'address',
}]);

 const dataSource = [
{
  key: '1',
  name: 'Mike',
  age: 32,
  address: '10 Downing Street',
},
{
  key: '2',
  name: 'John',
  age: 42,
  address: '10 Downing Street',
}];

React.useEffect(()=>{
  setColumns(columns.filter((ele)=>ele.dataIndex!=='name'))
 },[])


return (
  <>
  <Table columns={columns} dataSource={dataSource} />
  </>
   )
 }
 export default App;

问题由闭包陷阱+组件渲染优化共同导致：

• 初始化时存入state的columns配置中，age列的title渲染函数会形成闭包，捕获首次渲染时checkBox=false的状态值。
• 代码中useEffect依赖为空，仅在组件首次挂载时执行一次列过滤更新，更新时引用的还是首次渲染生成的旧columns数组。
• 后续checkBox状态更新时，columns状态本身没有变化，Ant Design Table内部对列渲染做了性能优化，不会重新执行旧的title渲染函数，复选框拿到的永远是闭包中缓存的旧值false，因此视觉上不会切换为选中态。

优先推荐第一种写法，代码更简洁，也能天然规避闭包问题：

• 不要用state存储columns配置，直接在组件渲染阶段生成最新的columns，保证title渲染函数每次都能拿到最新的状态值，过滤列的逻辑也不需要放在useEffect中：

import React from 'react';
import 'antd/dist/antd.css';
import { Checkbox, Space, Table } from "antd";
const App = () => {
 const [checkBox,setCheckBox]=React.useState(false)
 // 渲染阶段直接生成列配置，每次状态更新都会拿到最新值
 const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: ()=>{
        return (
          <Space>
            age
            <Checkbox 
              onChange={(e)=>setCheckBox(e.target.checked)} 
              checked={checkBox}
            />
          </Space>
        )
      },
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    }
 ].filter(ele => ele.dataIndex !== 'name');

 const dataSource = [
  {key: '1', name: 'Mike', age: 32, address: '10 Downing Street'},
  {key: '2', name: 'John', age: 42, address: '10 Downing Street'}
 ];

 return <Table columns={columns} dataSource={dataSource} />
}
export default App;

• 如果业务场景必须用state维护columns，需要在checkBox状态更新时同步重新生成columns配置，保证渲染函数能捕获到最新的状态值，同时修正useEffect的依赖，避免旧闭包问题。

上述问题可稳定复现，复现效果参考截图：

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