react-data-grid，无法读取未定义的属性“地图”

Question

我正在尝试使用我自己的数据创建一个带有 react-data-grid 的数据表。首先，我尝试重新创建入门示例，但出现错误

"TypeError: Cannot read property 'map' of undefined" at  
.../node_modules/react-data-grid/dist/react-data-grid.js:1094.

我正确安装了所有东西，但我不知道为什么当我只是按照教程进行操作时会发生这种情况。

最初是从我自己的数据开始的，然后我使用了示例中相同的确切数据，但它仍然有相同的错误。

使用教程在这个链接：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>
  );
}

Answer 1

您的问题是您在尝试传递道具之前关闭标签。又名

 <ReactDataGrid>
 ^-------------^
open         close

这意味着 props 在 React 生态系统中将被视为“孩子”（组件标签之间的任何东西都被视为孩子，我有点惊讶这个编译，部分原因是我喜欢使用 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