不能让Ant design Table单元格引用动态# of列

Question

我试图在Ant Design<Table />上获得一个单元格，以引用传递到<Table />元素的列的动态定义。然而，当我调用这个函数时，它从来没有更新过的值。我认为这是一个范围的问题，但我不知道如何去解决它。

问题的例子，单击Add Column，您将看到列的数量增加，然后单击表中的任意一个按钮。它调用父组件上的一个函数集，该函数集被传递给columns对象的引用，但它是columns的初始值，而不是当前值。(输出在控制台中)。

https://codesandbox.io/s/dynamic-form-item-antd4169-forked-fsunr?file=/index.js

代码=祝辞

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Button, Table } from "antd";
import { CustomCell } from "./custom-cell.component";
const dataSource = [
{
key: "1",
name: "Click Me"
},
{
key: "2",
name: "Or Me"
}
];
const TableComponent = () => {
const defaultColumns = [
{
title: "Name",
dataIndex: "name",
key: "name",
onCell: (record) => {
return {
record,
testFunction: () => {
console.log(`On test I have **${columns.length}** columns`);
}
};
}
}
];
const [columns, setColumns] = useState(defaultColumns);
useEffect(() => {
console.log(`Updated to have **${columns.length}** number of columns`);
}, [columns]);
const onClick = () => {
const val = `Column ${columns.length + 1}`;
setColumns([...columns, { title: val, dataIndex: val, key: val }]);
};
return (
<div>
<Button onClick={onClick}>Add column</Button>{" "}
<Table
dataSource={dataSource}
columns={columns}
components={{
body: {
cell: CustomCell
}
}}
/>
</div>
);
};
ReactDOM.render(<TableComponent />, document.getElementById("container"));

自定义单元格

import React from "react";
import { Button } from "antd";
export const CustomCell = ({ record, testFunction, children }) => {
if (record?.name) {
return <Button onClick={testFunction}>{record.name}</Button>;
}
return children;
};

Answer 1

我对您的代码进行了一些更改，并设法实现记录按钮单击单元格上的正确列数:

从onCell中删除testFunction，现在只返回record。

const defaultColumns = [
{
title: "Name",
dataIndex: "name",
key: "name",
onCell: (record) => ({ record }),
},
];

创建了一个简单的getColumns函数，它完成了testFunction的功能，这是在useState下实现的。

const getColumns = () => {
console.log(columns);
};

编辑你的正文>单元格渲染函数，所以它现在在那里添加了getColumns函数，将其分配给testFunctionprop，以及record和children，这意味着您的testFunction将始终从状态中获得更新的列。

<Table
dataSource={dataSource}
columns={columns}
components={{
body: {
cell: ({ record, children }) => (
<CustomCell
record={record}
testFunction={() => getColumns()}
children={children}
/>
),
},
}}
/>;

如果这对你有用，请让我知道，否则请提到什么不起作用，所以我可以更新我的答案(如果你需要进一步澄清，也可以评论)。我在你的代码沙箱上测试了这个，它是工作的。