使用阿里的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));
}
});
}
}