ant design中标签页Tabs切换table，某个td数据不显示？

Question

现在我3个标签页，每切换一个标签页会从后台获取数据，然后渲染到table里，因为后台有个“早起时间”字段是个数组，需要对其进行处理，原数据格式：time: ["2000-01-01,2001-01-01", "2002-01-01,2003-01-01"]，需要把数组里的数据拆开并在同一个td里换行显示。现在问题是：拆开后点击第一个标签页，“早起时间”这个数据能够换行显示，然后点击第二个标签页，“早起时间”这个数据就不见了，点击第三个标签页，“早起时间”这个数据也不见了，只有第一个标签页有这个数据，怎么才能让第二个、第三个标签页的“早起时间”显示出来？而且3个标签里其它列的数据都有，就只有处理过的“早起时间”字段在其它两个标签里没有
tabs代码如下：

handleTab =(key) =>{
    let intKey = parseInt(key);
    this.setState({
        dataSource2:[],
        totalDataSource:[]
    });
    switch(intKey){
        case 1 : 
            this.request(1); //调用后台
            break;
        case 2 :
            this.request(3); //调用后台
            break;
        case 3 :
            this.request(7); //调用后台
            break;
    }
}



<Tabs defaultActiveKey="1" onChange={this.handleTab} className="tab-wrap">
    <TabPane tab="tabl" key="1">
        <Table
            bordered
            columns={columns}
            dataSource={this.state.dataSource2}
            pagination={this.state.pagination}
        />
    </TabPane>
    <TabPane tab="tab2" key="2">
        <Table
            bordered
            columns={columns}
            dataSource={this.state.dataSource2}
            pagination={this.state.pagination}
        />
    </TabPane>
    <TabPane tab="tab3" key="3">
        <Table
            bordered
            columns={columns}
            dataSource={this.state.dataSource2}
            pagination={this.state.pagination}
        />
    </TabPane>
</Tabs>

早起时间time代码如下：

{
    title: '早起时间',
    key: 'time',
    dataIndex: 'time',
    render:(text, record)=>{
        console.log(text);
        const timeSpan = text.splice(',').map((item)=>{
            return (
                <span>
                    {item}<br></br>
                </span>
            )
        });
        return (
            // <span>
            //     {text}
            // </span>
            <div>
                {timeSpan}
            </div>
            
        )
    }
}

截图

Answer 1

{
    title: '早起时间',
    key: 'time',
    dataIndex: 'time',
    render:(text, record)=>{
        console.log(text);
        const timeSpan = text.splice(',').map((item)=>{
            return (
                <span>
                    {item}<br></br>
                </span>
            )
        });
        return (
            // <span>
            //     {text}
            // </span>
            <div>
                {timeSpan}
            </div>
            
        )
    }
}

splice会改变原有数组，导致原数组变成[]了，可以用slice代替