[Bug] vTabel 动态新增columns时候 使用headerCostomLayout会报错

Version

1.19.6

Link to Minimal Reproduction

no

Steps to Reproduce

no

Current Behavior

no

Expected Behavior

no

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

// import * as ReactVTable from '@visactor/react-vtable';

const { useCallback, useRef, useState, useEffect } = React;
const { ListTable, ListColumn, Group, Text, Image } = ReactVTable;
const { Avatar, Card, Space, Typography } = ArcoDesign;
const { IconThumbUp, IconShareInternal, IconMore } = ArcoDesignIcon;
const { Meta } = Card;

const UserProfileComponent = props => {
const { table, row, col, rect, dataValue } = props;
if (!table || row === undefined || col === undefined) {
return null;
}
const { height, width } = rect || table.getCellRect(col, row);

const [hover, setHover] = useState(false);

return (
<Group
attribute={{
width,
height,
display: 'flex',
flexDirection: 'row',
flexWrap: 'nowrap',
alignItems: 'center',
alignContent: 'center',
}}
>
<Group
attribute={{
width: 190,
height: 25,
fill: '#e6fffb',
lineWidth: 1,
cornerRadius: 10,
display: 'flex',
flexDirection: 'row',
flexWrap: 'nowrap',
alignItems: 'center',
alignContent: 'center',
cursor: 'pointer',
boundsPadding: [0, 0, 0, 10],
react: {
pointerEvents: true,
container: table.bodyDomContainer, // table.headerDomContainer
anchorType: 'bottom-right',
element: ,
},
}}
onMouseEnter={event => {
setHover(true);
event.currentTarget.stage.renderNextFrame(); // to do: auto execute in react-vtable
}}
onMouseLeave={event => {
setHover(false);
event.currentTarget.stage.renderNextFrame();
}}
>
<Text
attribute={{
text: 'dataValue',
fontSize: 14,
fontFamily: 'sans-serif',
fill: 'rgb(51, 101, 238)',
boundsPadding: [0, 0, 0, 10],
cursor: 'pointer',
}}
/>


);
};

const CardInfo = props => {
return props.hover ? (
<Card className="card-with-icon-hover" style={{ width: 360 }}>
wqw

) : (
<></>
);
};

function App() {
const records = [
{
bloggerId: 1,
bloggerName: 'Virtual Anchor Xiaohua',
bloggerAvatar:
'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/flower.jpg',
introduction:
'Hi everyone, I am Xiaohua, the virtual host. I am a little fairy who likes games, animation and food. I hope to share happy moments with you through live broadcast.',
fansCount: 400,
worksCount: 10,
viewCount: 5,
city: 'Dream City',
tags: ['game', 'anime', 'food'],
},
{
bloggerId: 2,
bloggerName: 'Virtual anchor little wolf',
bloggerAvatar:
'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/wolf.jpg',
introduction:
'Hello everyone, I am the virtual anchor Little Wolf. I like music, travel and photography, and I hope to explore the beauty of the world with you through live broadcast.',
fansCount: 800,
worksCount: 20,
viewCount: 15,
city: 'City of Music',
tags: ['music', 'travel', 'photography'],
},
{
bloggerId: 3,
bloggerName: 'Virtual anchor bunny',
bloggerAvatar:
'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/rabbit.jpg',
introduction:
'Hello everyone, I am the virtual anchor Xiaotu. I like painting, handicrafts and beauty makeup. I hope to share creativity and fashion with you through live broadcast.',
fansCount: 600,
worksCount: 15,
viewCount: 10,
city: 'City of Art',
tags: ['painting', 'handmade', 'beauty makeup'],
},
{
bloggerId: 4,
bloggerName: 'Virtual anchor kitten',
bloggerAvatar:
'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/cat.jpg',
introduction:
'Hello everyone, I am the virtual host Kitty. I am a lazy cat who likes dancing, fitness and cooking. I hope to live a healthy and happy life with everyone through the live broadcast.',
fansCount: 1000,
worksCount: 30,
viewCount: 20,
city: 'Health City',
tags: ['dance', 'fitness', 'cooking'],
},
{
bloggerId: 5,
bloggerName: 'Virtual anchor Bear',
bloggerAvatar:
'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bear.jpg',
introduction:
'Hello everyone, I am the virtual host Xiaoxiong. A little wise man who likes movies, reading and philosophy, I hope to explore the meaning of life with you through live broadcast.',
fansCount: 1200,
worksCount: 25,
viewCount: 18,
city: 'City of Wisdom',
tags: ['Movie', 'Literature'],
},
{
bloggerId: 6,
bloggerName: 'Virtual anchor bird',
bloggerAvatar:
'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bird.jpeg',
introduction:
'Hello everyone, I am the virtual anchor Xiaoniao. I like singing, acting and variety shows. I hope to be happy with everyone through the live broadcast.',
fansCount: 900,
worksCount: 12,
viewCount: 8,
city: 'Happy City',
tags: ['music', 'performance', 'variety'],
},
];
const [columns, setcolumns] = useState([]);
useEffect(() => {
const list = [];
const arr = [
{
field: 'bloggerId',
title: 'ID',
},
{
field: 'bloggerName',
title: 'bloggerName',
},
{
field: 'fansCount',
title: 'fansCount',
},
{
field: 'worksCount',
title: 'worksCount',
},
{
field: 'viewCount',
title: 'viewCount',
},
];

arr.forEach((item, i) => {
  setTimeout(() => {
    list.push(item);
    setcolumns([...list]);
    // setcolumns(arr);
  }, 2000 * i);
});

}, []);
return (
<ListTable
records={records}
height={900}
// defaultRowHeight={80}
onReady={table => {
// eslint-disable-next-line no-undef
// (window as any).tableInstance = table;
}}
ReactDOM={ReactDom}
>
{columns.map(v => {
if (v.field === 'bloggerName') {
return (
<ListColumn field={'bloggerName'} title={'Name'} width={220}>
<UserProfileComponent role={'header-custom-layout'} />

);
}
return <ReactVTable.ListColumn {...v} />;
})}

);
}

const root = ReactDom.createRoot(document.getElementById(CONTAINER_ID));
root.render();

// release react instance, do not copy
window.customRelease = () => {
root.unmount();
};

Start with the provided React App entry point and reproduce the error by progressively adding columns to ListTable, especially the bloggerName ListColumn using UserProfileComponent with role="header-custom-layout". Compare behavior with and without the custom layout; done means dynamic column additions no longer produce an error.