React 中 Table 数据源已经改变，但是 Table 却没有显示新的数据

前言：在前段时间有一个 React 中的 Bug 真是困扰了我好长时间~~~

场景还原：点击 Table 的某一行，下方显示另一个 Table ，其数据是上方 Table 数据源中的子数据

实现思路：给 Table 数据重新给一个新的唯一的 ID 并赋值给 Table 的 rowKey

---

1、在点击 Table 的行的方法中：

onRow={(record, index) => {
        return {
            onClick: () => {
                this.setState({
                CurRowIndexOfShippingLine: index,
                CurShippingLineID: record.ID,
                CreatePortView:true,   //让港口Table显示
                PortList:record.LinePorts?SetID(record.LinePorts):[],
            });
        }
    }
}}

2、在页面上方定义 SetID 方法：

//用于设置唯一的行ID<页面不渲染>
function SetID(Array) {
    let Data = Array;
    if(Data && Data.length>0){
        for (let i = 0; i < Data.length; i++) {
            Data[i].ID = Data[i].SortNum + Date.now();
        }
    }
    return Data;
}

3、设置下方 Table 的 rowKey='ID' ：

<Table
    columns={this.Port_Columns}
    dataSource={PortList}
    rowKey='ID'
    pagination={{pageSize: 15, hideOnSinglePage: true}}
    bordered={true}
    rowClassName={(record, index) => {
        if (record.IsEdit) {
            return "iseditrow editRow"
        }else {return "editRow"}
    }}
/>

---

END