Antd(Ant-design)，嵌套子表格（expandedRowRender）的异步获取数据

使用阿里的ant-design开源框架，要在表格里面嵌套子表格，需要在用户点击父表格的一行数据后，获取该行的key，然后去异步请求后台的数据用来填充子表格的内容。

如果这样写（省略无关代码）：

expandedRowRender = (record) => {

    dispatch({
        type: 'flow/getPlanList',
        payload: {
            contractId: record.contract_id, // 该参数是从父表格带过来的key
        },
        callback: () => {
            const {
              flow: { data },
            } = this.props; 

            this.setState({
              secData: data.list,
            });

            console.log("返回数据(PlanList):" + JSON.stringify(this.state.secData));
        }
    });
	  
    return (
        <Table
            columns={secColumns}
            dataSource={this.state.secData}
            pagination={false}
        />
    );
};

render() {
    return(
        <Card>
          {this.renderForm()}
          <div>
             <Table
                expandedRowRender={this.expandedRowRender}
                loading={loading}
                rowSelection={rowSelection}
                dataSource={list}
                columns={columns}
                pagination={paginationProps}
                scroll={{ x: 2500}}
                size = 'middle' 
                expandRowByClick={true}
                onSelect={this.seFn}
             />
          </div>
        </Card>
    ) 
}

则会出现不断的发起请求的现象：

这是因为，expandedRowRender 实际上是在 Table 组件的 render 方法中调用的，React render 中用 dispatch 会造成重复调用的问题，dispatch -> setState -> render -> dispatch -> setState -> render，循环往复。所以应该把 dispatch 放在 onExpand 中。

onExpand = (expanded, record) => {
    const { dispatch } = this.props;

    dispatch({
        type: 'flow/getPlanList',
        payload: {
          contractId: record.contract_id,
        },
        callback: () => {
            const {
                flow: { data },
            } = this.props;  

            this.setState({
                secData: data.list ,
            });

          console.log("返回数据(PlanList):" + JSON.stringify(this.state.secData));
        }
    });
}

但是单纯的这样做，又会带来新的问题，就是子表格的所有数据都变成了相同的。

本人的解决办法是使用键值对。

onExpand = (expanded, record) => {
    const { dispatch } = this.props;

    if (expanded === false) {
      // 因为如果不断的添加键值对，会造成数据过于庞大，浪费资源，
      // 因此在每次合并的时候讲相应键值下的数据清空
      console.log("合并！");
      this.setState({
        subTabData: {
          ...this.state.subTabData,
          [record.contract_id]: [] ,
        }
      });
    } else {
      console.log("展开！");
      dispatch({
        type: 'flow/getPlanList',
        payload: {
          contractId: record.contract_id,
        },
        callback: () => {
          const {
            flow: { data },
          } = this.props; 

          this.setState({
            subTabData: {
              ...this.state.subTabData,
              [record.contract_id]: data.list ,
            }
          });

          console.log("返回数据(PlanList):" + JSON.stringify(this.state.subTabData));
        }
      });
    }
  }