reactjs - React 数据网格在 src/DataGrid.tsx :268 throwing a : TypeError: rows is undefined 处失败

Question

我正在使用 React Data Grid 网站 https://adazzle.github.io/react-data-grid/docs/examples/simple-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 Data Grid 返回了一个类型错误。我做错了什么？

Answer 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 用法的示例。 .