Javascript 物料界面：DataGrid组件错误：无法读取属性'；长度'；未定义的

我想用一个表的形式来表示我的Javascript对象数据，该表具有分页功能，并且是可排序的。我发现Material UI的

DataGrid

组件是最好的选择，但我遇到了一些错误

这是我的密码：

import React from 'react';
import { DataGrid } from '@material-ui/data-grid';

function ExpPage(props) {

    const data = [
        {"id":"1","SYMBOL":"20MICRONS","NAME OF COMPANY":"20 Microns Limited","SERIES":"EQ","DATE OF LISTING":"06-Oct-08","PAID UP VALUE":5,"MARKET LOT":1,"ISIN NUMBER":"INE144J01027","FACE VALUE":5,"DATE":"30-10-2020","PREV CLOSE":27.35,"OPEN":28.4,"HIGH":28.55,"LOW":27,"LAST":28.2,"CLOSE":28.4,"VWAP":28.13,"VOLUME":55022,"TURNOVER":155000000000,"TRADES":278,"DELIVERABLE VOLUME":40405,"DELIVERABLE%":0.7343},
        {"id":"2","SYMBOL":"21STCENMGM","NAME OF COMPANY":"21st Century Management Services Limited","SERIES":"EQ","DATE OF LISTING":"03-May-95","PAID UP VALUE":10,"MARKET LOT":1,"ISIN NUMBER":"INE253B01015","FACE VALUE":10,"DATE":"30-10-2020","PREV CLOSE":9.8,"OPEN":9.8,"HIGH":9.9,"LOW":9.8,"LAST":9.9,"CLOSE":9.85,"VWAP":9.87,"VOLUME":407,"TURNOVER":401720000,"TRADES":9,"DELIVERABLE VOLUME":407,"DELIVERABLE%":1},
        {"id":"6","SYMBOL":"3IINFOTECH","NAME OF COMPANY":"3i Infotech Limited","SERIES":"EQ","DATE OF LISTING":"22-Apr-05","PAID UP VALUE":10,"MARKET LOT":1,"ISIN NUMBER":"INE748C01020","FACE VALUE":10,"DATE":"30-10-2020","PREV CLOSE":2.95,"OPEN":2.95,"HIGH":3.05,"LOW":2.95,"LAST":2.95,"CLOSE":3,"VWAP":2.99,"VOLUME":1212482,"TURNOVER":363000000000,"TRADES":1225,"DELIVERABLE VOLUME":677679,"DELIVERABLE%":0.5589},
        {"id":"3","SYMBOL":"3PLAND","NAME OF COMPANY":"3P Land Holdings Limited","SERIES":"EQ","DATE OF LISTING":"19-Jul-95","PAID UP VALUE":2,"MARKET LOT":1,"ISIN NUMBER":"INE105C01023","FACE VALUE":2,"DATE":"30-10-2020","PREV CLOSE":6.5,"OPEN":6.8,"HIGH":6.8,"LOW":6.8,"LAST":6.8,"CLOSE":6.8,"VWAP":6.8,"VOLUME":1204,"TURNOVER":818720000,"TRADES":8,"DELIVERABLE VOLUME":1204,"DELIVERABLE%":1},
        {"id":"0","SYMBOL":"3MINDIA","NAME OF COMPANY":"3M India Limited","SERIES":"EQ","DATE OF LISTING":"13-Aug-04","PAID UP VALUE":10,"MARKET LOT":1,"ISIN NUMBER":"INE470A01017","FACE VALUE":10,"DATE":"30-10-2020","PREV CLOSE":18717.75,"OPEN":18699.95,"HIGH":18998,"LOW":18480,"LAST":18480,"CLOSE":18675.35,"VWAP":18650.04,"VOLUME":2367,"TURNOVER":4410000000000,"TRADES":1397,"DELIVERABLE VOLUME":1584,"DELIVERABLE%":0.6692},
        {"id":"4","SYMBOL":"5PAISA","NAME OF COMPANY":"5Paisa Capital Limited","SERIES":"EQ","DATE OF LISTING":"16-Nov-17","PAID UP VALUE":10,"MARKET LOT":1,"ISIN NUMBER":"INE618L01018","FACE VALUE":10,"DATE":"17-08-2020","PREV CLOSE":355.35,"OPEN":355,"HIGH":355,"LOW":337.6,"LAST":337.6,"CLOSE":337.6,"VWAP":339.16,"VOLUME":29017,"TURNOVER":984000000000,"TRADES":1632,"DELIVERABLE VOLUME":24978,"DELIVERABLE%":0.8608}
        ]

    const columns = [
        { field : 'SYMBOL', headerName: 'Symbol'},
        { field : 'NAME OF COMPANY', headerName: 'Name Of Company'},
        { field : 'DATE OF LISTING', headerName: 'Date of Listing'},
        { field : 'PREV CLOSE', headerName: 'Previous Close'},
        { field : 'CLOSE', headerName: 'Close'}
    ];
    return (
        <div className="bg-light">
            <div className="container bg-white">
                    <DataGrid rows={data} cols={columns} pageSize={100} />
            </div>
        </div>

    );
}

export default ExpPage;

从“React”导入React；
从'@material ui/data grid'导入{DataGrid}；
功能扩展页（道具）{
常数数据=[
{“id”：“1”，“符号”：“20微米”，“公司名称”：“20微米有限公司”，“系列”：“EQ”，“上市日期”：“08年10月06日”，“实收价值”：5，“市场地段”：1，“ISIN编号”：“INE144J01027”，“面值”：5，“日期”：“30-10-2020”，“前期收盘”：27.35，“开盘”：28.4，“高”：28.55，“低”：27，“最后”：28.2，“收盘”：28.4，“VWAP”：28.13，“成交量”：55022，“成交额”：155000000000，“交易”：278，“可交付量”：40405，“可交付量%”：0.7343}，
{“id”：“2”，“符号”：“21STCENMGM”，“公司名称”：“21世纪管理服务有限公司”，“系列”：“EQ”，“上市日期”：“95年5月3日”，“实收价值”：10，“市场地段”：1，“ISIN编号”：“INE253B01015”，“票面价值”：10，“日期”：“30-10-2020”，“前期收盘”：9.8，“开盘”：9.9，“低位”：9.8，“最后”：9.9，“收盘”：9.85，“VWAP”：9.87，“成交量”：407，“营业额”：401720000，“交易”：9，“可交付量”：407，“可交付量%”：1}，
{“id”：“6”，“符号”：“3IINFOTECH”，“公司名称”：“3i Infotech Limited”，“系列”：“EQ”，“上市日期”：“2005年4月22日”，“实收价值”：10，“市场地段”：1，“ISIN编号”：“INE748C01020”，“票面价值”：10，“日期”：“30-10-2020”，“前期收盘”：2.95，“开盘”：2.95，“高”：3.05，“低”：2.95，“最后”：2.95，“收盘”：3，“VWAP”：2.99，“成交量”：1212482，“营业额”：36300000000，“交易”：1225，“可交付量”：677679，“可交付百分比”：0.5589}，
{“id”：“3”，“符号”：“3P土地”，“公司名称”：“3P土地控股有限公司”，“系列”：“EQ”，“上市日期”：“1995年7月19日”，“实收价值”：2，“市场地段”：1，“ISIN编号”：“INE105C01023”，“面值”：2，“日期”：“30-10-2020”，“前期收盘”：6.5，“开盘”：6.8，“高”：6.8，“低”：6.8，“最后”：6.8，“收盘”：6.8，“VWAP”：6.8，“成交量”：1204，“营业额”：818720000，“交易”：8，”可交付量：1204，“可交付量%”：1}，
{“id:”0“，”SYMBOL:”3M印度“，”公司名称“，”3M印度有限公司“，”系列“，”EQ“，”上市日期“，”2004年8月13日“，”实收价值“，”1，“ISIN编号“，”INE470A01017“，”票面价值“，”10，“日期“，”2020年10月30日“，”上一收盘“，”18717.75，“开盘“，”18699.95，“高位“，”18998，“低位“，”18480，“尾盘“，”18480，“收盘“，”18675.35，“VWAP“，”18650.04，“成交量“，”2367，“成交额”“：441000000000，“交易”：1397，“可交付量”：1584，“可交付量%”：0.6692}，
{“id”：“4”，“符号”：“5PAISA”，“公司名称”：“5PAISA Capital Limited”，“系列”：“EQ”，“上市日期”：“2017年11月16日”，“实收价值”：10，“市场地段”：1，“ISIN编号”：“INE618L01018”，“面值”：10，“日期”：“17-08-2020”，“前期收盘”：355.35，“开盘”：355，“高”：355，“低”：337.6，“最后”：337.6，“收盘”：337.6，“VWAP”：339.16，“成交量”：29017，“成交额”：984000000000，“交易”：1632，“可交付量”：24978，“可交付量%”：0.8608}
]
常量列=[
{字段：'SYMBOL'，标题名称：'SYMBOL'}，
{字段：'公司名称'，标题名称：'公司名称'}，
{字段：'上市日期'，标题名称：'上市日期'}，
{字段：'PREV CLOSE'，标题名称：'Previous CLOSE'}，
{字段：'CLOSE'，标题名称：'CLOSE'}
];
返回(
);
}
导出默认扩展页面；

据我所知，我正在关注这份文件，但可能遗漏了什么

这里是我的错误：

TypeError:无法读取未定义的属性“length”

有关进一步信息， 我在这里链接到沙盒： 参见API。道具称为

列

，而不是

列

---

非常感谢您的帮助：）。我还想知道是否可以将每一行函数作为新页面的链接。是否可能？@BhagyeshGanatra请参见。您可以添加锚元素，以这种方式将用户链接到其他页面。