這是將 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) }}
      ...
    />