如何將其轉換為反應功能組件

Question

我有這個來自 react-data-grid 我已經將它轉換為功能組件，但是當我更改一行的內容時，我被卡住了，更改將生效

原來的

  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 };
  });
};

我的代碼

    const columns = [some data];
    let rowsIntial = [some data];
    const[rows,setRows]=useState(rowsinitial);

    const   onGridRowsUpdated = ({ fromRow, toRow, updated }) => {

        const rows = rows.slice();
       console.log(rows);
       for (let i = fromRow; i <= toRow; i++) {
          rows[i] = { ...rows[i], ...updated };
         }

      return rows;
   };

JSX：

                    <ReactDataGrid
                        columns={columns}
                        rows={rows}
                        onGridRowsUpdated={onGridRowsUpdated}
                        enableCellSelect={true}
                    />

如何更改onGridRowsUpdated才能正常工作？

Answer 1

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