React Data Grid 在 src/DataGrid.tsx:268 失败，抛出：TypeError: rows is undefined答案

【问题标题】：React Data Grid fails at src/DataGrid.tsx:268 throwing a : TypeError: rows is undefinedReact Data Grid 在 src/DataGrid.tsx:268 失败，抛出：TypeError: rows is undefined
【发布时间】：2020-03-27 15:47:03
【问题描述】：

我正在使用 https://adazzle.github.io/react-data-grid/docs/examples/simple-grid 的 React Data Grid 网站上提供的示例代码，没有任何更改：

import React from "react";
import ReactDOM from "react-dom";
import ReactDataGrid from "react-data-grid";
import "./styles.css";

const columns = [
 { key: "id", name: "ID", editable: true },
 { key: "title", name: "Title", editable: true },
 { key: "complete", name: "Complete", editable: true }
];

const rows = [
 { id: 0, title: "Task 1", complete: 20 },
 { id: 1, title: "Task 2", complete: 40 },
 { id: 2, title: "Task 3", complete: 60 }
];

class Example extends React.Component {
 state = { rows };

onGridRowsUpdated = ({ fromRow, toRow, updated }) => {
this.setState(state => {
  const rows = state.rows.slice();
  for (let i = fromRow; i <= toRow; i++) {
    rows[i] = { ...rows[i], ...updated };
  }
  return { rows };
 });
 };
render() {
 return (
  <ReactDataGrid
    columns={columns}
    rowGetter={i => this.state.rows[i]}
    rowsCount={3}
    onGridRowsUpdated={this.onGridRowsUpdated}
    enableCellSelect={true}
  />
);
}
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Example />, rootElement);

但从 React 数据网格返回类型错误。我做错了什么？

【问题讨论】：

事实上，经过一些调试，我相信已经用 npm install 命令下载的类接口 ReactDataGrid 是一个简化的类，它只需要两个属性：列和行（必需），忽略任何其他属性。如何获取/安装完整的 ReactDataGrid 类?????

标签： reactjs react-data-grid

【解决方案1】：

我第一次尝试使用 react-data-grid 时遇到了同样的错误 (TypeError: rows is undefined)。问题是 7.0.0-canary.14 版本最近发布在 npmjs.com 上，react-data-grid 网站上的所有文档和示例都是针对 6 版本的。

根据更新日志 (https://github.com/adazzle/react-data-grid/blob/HEAD/CHANGELOG.md) 版本，7 有一个非常不同的界面，目前似乎没有在任何地方记录。它似乎也是一个金丝雀版本，可能还没有准备好用于生产。坦率地说，在评估这个组件的过程中，这个重大更改的发布方式让我重新考虑将它用于任何严重的事情。

同时，如果您想使用示例或当前文档，您可以安装较早的版本

npm install react-data-grid@^6.0.0

或

yarn add react-data-grid@^6.0.0

更新：https://github.com/adazzle/react-data-grid/tree/canary/stories/demos 处的 .tsx（不是 .js）文件中有一些版本 7 api 使用示例。

【讨论】：

确实，我回到了 6.1.0 版本，它工作正常。谢谢