这是将 class 组件转换为钩子组件的最佳方法吗？

Question

所以这是我试图使用 useState 的代码，

https://codesandbox.io/s/rdg-cell-editing-forked-nc7wy?file=/src/index.js:0-1146

这是我的尝试，我得到的错误是 × TypeError: Cannot read property 'length' of undefined

import React, { useState } from "react";
import ReactDataGrid from "react-data-grid";
import "./styles.css";

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

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

  onGridRowsUpdated = ({ fromRow, toRow, updated }) => {
    setRows((state) => {
      const rows = rows.slice();
      for (let i = fromRow; i <= toRow; i++) {
        rows[i] = { ...rows[i], ...updated };
      }
      return { rows };
    });
  };


  return (
    <ReactDataGrid
        columns={columns}
        rowGetter={(i) => rows[i]}
        rowsCount={3}
        onGridRowsUpdated={onGridRowsUpdated}
        enableCellSelect={true}
        editable={true}
      />
  );
};

export default App;

所以我正在使用https://codesandbox.io/s/rdg-cell-editing-forked-nc7wy?file=/src/index.js:0-1146中的代码来尝试使用 useState 但我得到了错误×TypeError：无法读取未定义的属性“长度”

Answer 1

我认为您需要将 arguments 传递给onGridRowsUpdated 。

    <ReactDataGrid   
      ...
      onGridRowsUpdated={() => { onGridRowsUpdated(fromRow, toRow, updated) }}
      ...
    />