antd react table扩展行(expandedRowRender，onExpand)异步记载数据再渲染问题

最近在做项目的时候遇到一种情况，需求是做可展开的表格，当点击展开时异步发送请求将数据渲染到展开的内容中。
项目用的是react+Antdesign
主要使用的就是Table组件的onExpand，expandedRowRender两个属性。

expandedRowRender 额外的展开行
类型Function(record, index, indent, expanded):ReactNode
onExpand 点击展开图标时触发 Function(expanded, record)

最开始我将扩展行写在 expandedRowRender里,并在里面异步请求数据,但是发现陷入了循环，一直在不停的发出请求。。。浏览器卡死了！！！！
后来去看了react的生命周期,原来是一直 dispatch==> setState==> render ==> dispatch==> setState==> render

然后把请求写在 onExpand里又发现请求数据时,点击别的行,所有行的数据变成了最后请求的数据。。。。。

总结一下
onExpand是记录是否点击扩展行的,但是数据渲染应该放在 expandedRowRenders中,所以可以通过onExpand发送请求获取数据然后传给expandedRowRenders中。

一下是主要代码，省略了一些没有用的。主要思路就是给每个展开行都加对应的id，并将所有展开的行存入一个lineTabData中，然后再根据id来访问数据就可以啦

class ProductList extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      lineTabData:[ ]
    }
}

  render() {
    const columns = [表格数据]
    return (    
        <Table
          rowKey={record => record.id}
          columns={columns}
          dataSource={dataSource}
          onExpand={(expanded,record)=>this.onExpand(expanded,record)}
          expandedRowRender={record => this.expandedRowRender(record)}
      />
    )
  }

}

onExpand = (expanded, record) => {
    const { dispatch } = this.props
      dispatch({
        type: 'brand/getArrival',
        payload: {id:record.id},
      }).then(dataArr => {
        this.setState({
          lineTabData: {
            ...this.state.lineTabData,
            [record.id]: dataArr ,
          }
        })
      })
}

  expandedRowRender = (record) => {
  console.log(this.state.lineTabData[record.id])//打印出对应id展开行所请求的数据
    return (    
        <p>this.state.lineTabData[record.id]</p>
    )
  }

因为代码有些删减，所以可能有那里没有注意到。如有错误请谅解哈~