react-data-grid，无法读取未定义的属性'map‘

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

这意味着在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