以编程方式添加新的Tab页后，在单击它之前，React Metarial-UI TAB不会重新呈现

Question

我正在创建一个数组，该数组用于使用以下代码创建Tab页面

let myTabs = [];

const addTab = (tabname) => {
    myTabs = [...myTabs, tabname ];
}

class tabClass extends React.Component {
render () {
    <Tabs>
        myTabs.map(tab => {
                    <Tab label={tab} />
           });
    </Tabs>

} } export {addTab }; export default tabClass;

然后单击具有以下代码的按钮，然后从另一个组件调用addTab函数以添加新标签

import addTab from "./myTabs"

class showTabs extends component {
   render (){

          return (
             <div><button onclick={() => addTab("Test")}</div>

) } }

似乎工作正常，没有任何问题地添加了新的标签页。但是只有在用鼠标单击选项卡组件或更改选择后才能看到新选项卡。

添加新标签页后如何重新呈现或刷新标签组件