反应数据网格,无法读取未定义的 属性 '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