ui5-webcomponents - 标签容器渲染问题

Question

我正在使用 ui5 we components 渲染应用程序。在这里我准备了标签容器。

const App = () =>{

const [aSelectedTab, setSelectedTab] = useState<string[]>([]);

 

const prepareTabData = (oGroupField) => {
//It's return a component which contains a table, Form, backend calls
};

const renderSelectedTab = (oEvent) => {
setSelectedTab((aSelectedTab) => [...aSelectedTab, oEvent.detail.tab.dataset.id]);
};

return (
<TabContainer onTabSelect={renderSelectedTab}>
{aGroupFields.map((oGroupField) => (
<Tab data-id={oGroupField.field_name} text={oGroupField.field_name}>
{aSelectedTab.includes(oGroupField.field_name) &&
<Fragment>{prepareTabData(oGroupField)}</Fragment>
}
</Tab>
))}
</TabContainer>
);
}

在每个选项卡中都有包含大量数据的表，因此我决定仅按需加载表。解决了仅按需渲染的浪费渲染和组件。它提供了一些更好的性能。但我遇到了一些问题。也就是说，一旦我在一个选项卡中添加内容并导航到另一个选项卡并添加内容，接下来返回到上一个选项卡的数据就消失了。如何解决这个问题以实现快速渲染？