return (
<Table
components={components}
rowClassName={() => 'editable-row'}
bordered
dataSource={dataSource}
columns={Columns({userInfo,handleSave})}
/>
);
columns={() => Columns({userInfo,handleSave})}
1. 两种写法本质完全不同
写法
Columns()立即执行,返回数组,直接传给 Table 的 columns 属性;- Table 拿到数组,内部调用
.some()不会报错。
写法 2(报错的写法)
columns={() => Columns({userInfo,handleSave})}
- 你传给 columns 的不是数组,是一个函数;
- Antd Table 内部拿到值后执行
baseColumns.some(),变量是函数而非数组 →some is not a function。
2. 什么时候 columns 传函数才合法?
只有 Antd Table 的 column.render / filter 这类回调字段 才允许传函数;
根属性 columns 只接受数组,不接受函数。
3. 如果你想延迟执行 Columns 函数(比如依赖 state 更新重算列)
不需要包一层箭头函数,改用 useMemo 缓存列配置:
import { useMemo } from 'react';
// 缓存列,仅 userInfo 变化时重新生成
const tableColumns = useMemo(() => {
return Columns({ userInfo, handleSave });
}, [userInfo, handleSave]);
return (
<Table
columns={tableColumns}
// ...其他属性
/>
);
4. 写回调无意义
antd中Table 没有支持 columns 为函数的 API,强行传函数必然报错;
框架内部简化逻辑:
// antd Table 内部伪代码
const baseColumns = props.columns;
baseColumns.some(col => ...)
// baseColumns = ()=>[],函数没有some方法,直接抛错




