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

【问题标题】：Is this the best way to convert a class component to a hook component?这是将类组件转换为钩子组件的最佳方法吗？
【发布时间】：2021-02-09 14:37:12
【问题描述】：

这是我尝试使用 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：无法读取未定义的属性“长度”

【问题讨论】：

标签： javascript reactjs class react-hooks

【解决方案1】：

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

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

【讨论】：