react.js - Antd 如何通过onExpand展开动态获取的相应table形式的数据？

问题描述

问 题

做的是文件系统页面，antd中的table组件实现文件列表，点击onExpand触发并展开显示相应行号的对应数据，数据以table形式展示。但数据无法渲染到页面上该如何解决？

    //展开的表格界面
    expandedRowRenderFile = (expanded,record) => {
        const columns = [
            {title: '名称', dataIndex: 'name', key: 'name'},
            {title: '目录数量', dataIndex: 'dirs', key: 'dirs'},
            {title: '文件数量', dataIndex: 'files', key: 'files'},
            {title: '容量', dataIndex: 'size', key: 'size'},
        
        ];
        this.detailData(expanded,record); //发送请求，获得record对应的数据
        // detailDataChild为获取到的数据，测试可以打印出来
        //data为展开部分展示的数据
        data.push({
            "key": detailDataChild.name,
            "dirs": detailDataChild.dirs,
            "name": detailDataChild.name,
            "files":detailDataChild.files,
            "size": detailDataChild.size,    
        });
        console.log(data); //全部值为undefinied
        return (
            <Table
                columns={columns}
                dataSource={data}
                pagination={false}
                rowKey={record => record.registered}
            />
        );

    };
    
    //引用处
  
    <Table
        expandedRowRender={this.expandedRowRenderFile}
        onExpand={this.expandedRowRenderFile}
    />

未找到相应问题的解决方案，应该是我对react的组件渲染理解不够，但项目较急，希望能得到解答！

解决方案

按照 React 的规范，所有的组件数组必须绑定 key。在 Table 中，dataSource 和 columns 里的数据值都需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。
如果你的数据没有这个属性，务必使用 rowKey 来指定数据列的主键。若没有指定，控制台会出现以下的提示，表格组件也会出现各类奇怪的错误。

所以我给table 设置了 rowKey={record => record.name} 就可以了……

这篇关于react.js - Antd 如何通过onExpand展开动态获取的相应table形式的数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！