antd tabs标签页 table滚动加载 二次切换页面时,滚动加载失败

Question

第一次(进入tab="2")滚动加载table正常,但是切换标签页再回来(tab="2")就不可以滚动加载了,这是怎么回事各位大神(ノへ￣、)

//滚动加载的方法
handleInfiniteOnLoad = () => {
  let { StockList,pageNum,hasMore } = this.state;
    if(hasMore){
      this.setState({
        loading: true,
      });  
      异步加载().then(({data})=>{
        if(data.code === 100){
        //拼接
          data = data.concat(data.data.list)
          if(data.data.list.length === 0){
            hasMore = false
            message.warning("已加载全部")
          }
          this.setState({
            data,
            loading: false,
            hasMore,
          })
        }
      })
 }
 //切换tabs
callback =(key)=> {
   if(key == 2){
     异步加载().then(({data})=>{
        if(data.code === 100){
           this.setState({
            data : data.data.list
           })
        }
     })
   }else if(key == 1){
      异步加载().then(({data})=>{
         if(data.code === 100){
           this.setState({
             dataList : data.data.list
           })
         }
      })
   }
}

render() {
retrun(
<Tabs>
    <TabPane tab="1" key="1">
    ...
    </ TabPane>
    
    <TabPane tab="2" key="2">
        <InfiniteScroll
          initialLoad={false}
          pageStart={0}
          loadMore={()=>this.handleInfiniteOnLoad()}
          hasMore={!this.state.loading && this.state.hasMore}
          useWindow={false}
        >
            <Table .../>
        </InfiniteScroll>
    </TabPane>
</Tabs>
)
}

Answer 1

把 key=2 时的请求放进 生命周期钩子 函数里就ok了(不在callback里面请求),这样就不会出现第二次点击进入还要重新加载一遍, 注意 只要声明两个不同的空数组去保存两个标签页的表格数据就好了(●ˇ∀ˇ●)