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

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

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

这意味着该道具在React生态系统中将被视为“孩子”（组件标签之间的任何内容都被视为孩子，我对此编译感到有些惊讶，部分原因是为什么我喜欢使用打字稿获取语法发出这样的警告）。

在React中，在关闭标签之前，传递属性的方式是在标签本身上。

<ReactDataGrid prop1={something}>
---------------^-----------------
               ^ prop on component before closing tag

要修复当前的实现，只需将其更改为：）

<ReactDataGrid
  columns={columns}
  rowGetter={i => data[i]}
  rowsCount={3}
  minHeight={150}
/>

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

1 个答案:

See a working example here