反应数据网格,无法读取未定义的 属性 'map'
react-data-grid, cannot read property 'map' of undefined
我正在尝试使用我自己的数据通过 react-data-grid 创建数据 table。首先,我尝试重新创建入门示例,但出现错误
"TypeError: Cannot read property 'map' of undefined" at
.../node_modules/react-data-grid/dist/react-data-grid.js:1094.
我正确地安装了所有东西,我不确定为什么当我只是按照教程学习时会发生这种情况。
最初从我自己的数据开始,然后我使用了与示例中完全相同的数据,但它仍然有相同的错误。
在此 link 使用教程:https://adazzle.github.io/react-data-grid/docs/quick-start
render(){
const columns = [
{ key: 'id', name: 'ID' },
{ key: 'title', name: 'Title' },
{ key: 'count', name: 'Count' } ];
const data = [{id: 0, title: 'row1', count: 20}, {id: 1, title: 'row1',
count: 40}, {id: 2, title: 'row1', count: 60}];
return (
<div>
<ReactDataGrid>
columns={columns}
rowGetter={i => data[i]}
rowsCount={3}
minHeight={150}
</ReactDataGrid>
</div>
);
}
你的问题是你在尝试传递道具之前关闭了标签。又名
<ReactDataGrid>
^-------------^
open close
这意味着道具在 React 生态系统中将被视为 "children"(组件标签之间的任何内容都被视为子项,我对此编译感到有点惊讶,部分原因是我喜欢使用typescript 来获取像这样的语法问题警告。
在 React 中,传递属性的方式是在关闭标签之前在标签本身上传递。
<ReactDataGrid prop1={something}>
---------------^-----------------
^ prop on component before closing tag
要修复您当前的实现,只需将其更改为:)
<ReactDataGrid
columns={columns}
rowGetter={i => data[i]}
rowsCount={3}
minHeight={150}
/>
See a working example here
我正在尝试使用我自己的数据通过 react-data-grid 创建数据 table。首先,我尝试重新创建入门示例,但出现错误
"TypeError: Cannot read property 'map' of undefined" at
.../node_modules/react-data-grid/dist/react-data-grid.js:1094.
我正确地安装了所有东西,我不确定为什么当我只是按照教程学习时会发生这种情况。
最初从我自己的数据开始,然后我使用了与示例中完全相同的数据,但它仍然有相同的错误。
在此 link 使用教程:https://adazzle.github.io/react-data-grid/docs/quick-start
render(){
const columns = [
{ key: 'id', name: 'ID' },
{ key: 'title', name: 'Title' },
{ key: 'count', name: 'Count' } ];
const data = [{id: 0, title: 'row1', count: 20}, {id: 1, title: 'row1',
count: 40}, {id: 2, title: 'row1', count: 60}];
return (
<div>
<ReactDataGrid>
columns={columns}
rowGetter={i => data[i]}
rowsCount={3}
minHeight={150}
</ReactDataGrid>
</div>
);
}
你的问题是你在尝试传递道具之前关闭了标签。又名
<ReactDataGrid>
^-------------^
open close
这意味着道具在 React 生态系统中将被视为 "children"(组件标签之间的任何内容都被视为子项,我对此编译感到有点惊讶,部分原因是我喜欢使用typescript 来获取像这样的语法问题警告。
在 React 中,传递属性的方式是在关闭标签之前在标签本身上传递。
<ReactDataGrid prop1={something}>
---------------^-----------------
^ prop on component before closing tag
要修复您当前的实现,只需将其更改为:)
<ReactDataGrid
columns={columns}
rowGetter={i => data[i]}
rowsCount={3}
minHeight={150}
/>