Tabcontainer 呈现问题

Question

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

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>
);
}

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