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 (    <TablerowKey={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.propsdispatch({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>)}

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

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

antd react table 嵌套子表格例子
antd react table 嵌套子表格例子 import { Button, TableColumnsType } from 'antd'; import { Badge, Dropdown, ...
vue异步请求数据重新渲染
vue异步请求数据时往往不能及时更新,下面介绍一种方法解决. export default {name: "pic",created() {this.getList();},dat ...
react：antd 中 table 添加合计行
用的Antd 的 UI 框架. 场景:table 中后面想添加一行合计.合计的值由后端计算提供.目前想到两种方法. 第一种:比较好维护. 第二种:可以实现功能效果,但是感觉不太优雅. 方法一:把合计行 ...
antd中table组件中如何进行换行操作（react中）
antd中table组件中如何进行换行操作(react中) 说明效果数据代码说明 react项目,遇到某字段对应的单元格内需要换行. 最初想偷懒,尝试了在数据中加入回车.使用模板字符串.转义字 ...
antd table合并行或者列（动态添加合并行、列）
antd table合并行或者列(动态添加合并行.列) 表头只支持列合并,使用 column 里的 colSpan 进行设置. 表格支持行/列合并,使用 render 里的单元格属性 colSpan ...
给antd的Table组件添加总计和平均值
前言遇到一个需求,应该挺常见但是我却没怎么遇到,也费了不少功夫也解决,记录一下. 需求很简单,是个后台管理系统项目,要做个表格,(什么,这么简单,直接组件库里面复制一下Tabel不就完事了) 哈哈, ...
antd的Table列选择、列拓展
antd的Table列选择.列拓展列选择:rowSelection属性 //选择的项目存放在数组中 const [selectedRow, setSelectedRow] = useState< ...
bootstrap-table、antd-table组件(react)实现首行、首列固定的表格
小剧情成本系统规划使用react,可是基于业务需要离不开老版OA(bootstrap jquery)中的工作流,本来是可以尽情使用react的,前边挡头大象的无力感还是有的. 多次开会渴望的眼神盯着 ...
React开发中使用fetch进行异步请求
React开发中使用fetch进行异步请求最新的Web API接口中提供了一个全局fetch方法,从而以一种更为简单.合理的方式来支持跨网络异步获取资源. 这种功能以前是使用 XMLHttpRequ ...

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

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

最新文章

热门文章