react子组件复用引发的父组件直接获取子组件数据错乱问题

背景：

    父组件是tab页，多次引用同一子组件，并可以新增及关闭tab页。

问题描述：

       父组件切换tab2之后，关闭tab2，active的tab变为tab1，这个时候获取到的子组件数据是tab2的数据，正常应该获取到的数据为当前activeTab的数据，即tab1的数。父组件在未发生关闭tab页的情况下，切换tab页的时可以正常获取子组件数据。

代码如下：

父组件：

子组件：

分析：

       父组件在新增或者手动切换tab页的时候，都会触发父组件state变化，会重新引用一次子组件。就会触发一次子组件的componentDidMount，会给父组件的this.api重新赋值。这个时候的赋值是覆盖性质的赋值，tab1的时候this.api是tab页的方法，tab2的时候this.api被覆盖成了tab2的方法。

      当切换到tab2时，this.api被覆盖成了tab2的方法，这个时候把tab2给关掉了，activetab变成了tab1,但是tab1的componentDidMount并没有被触发，所以这个时候的this.api仍旧是tab2的方法。就导致这个时候获取到的数据是tab2的数据，并不是tab1的数据。

解决方案：

      父组件同时引用多个子组件，并调用子组件方法时，每个子组件的方法名需要是不同的。并且，再子组件销毁时，应该把子组件对应的方法进行销毁。

       父组件

子组件：