antd的api中嵌套表格的数据在expandedRowRender方法中,但是使用的时候不能在这个方法中进行ajax请求,expandedRowRender 实际上是在 Table 组件的 render 方法中调用的,React render 中用 ajax 会造成重复调用的问题,ajax -> setState -> render -> ajax-> setState -> render,循环往复。在expandedRowRender中进行render返回标签,在onExpand中拿着父级的id去请求子表格的数据
const expandedRowRender = (record) => {
return <Table
columns={columnsChildren}
dataSource={childrenData[record.id]}
pagination={false}
rowKey={record=>record.id} />;
};
const onExpand = (expanded, record) =>{
childrenList({
id:record.id
}).then(res => {
setChildrenData({...childrenData,[record.id]:res.data})
})
最开始写的时候直接将子表格的数据作为children字段返回了,不用做二次请求,但是作为children字段返回在expandedRowRender中做render的时候会出现问题,点击展开父级会增加(子级的那几个数据)就是render导致的问题
用其他字段就可以的,用children就会出现这个问题 具体不知道原因,估计是children字段在antd组件本身做了处理,不清楚