使用adazzle React Data Grid编辑单元格报setState undefined错误如何解决

问题根源 #

你使用的是React函数组件写法，函数组件中不存在类组件的this实例，也不能调用this.setState方法更新状态。你参考的示例是类组件写法，直接照搬就会触发this未定义的报错。另外你额外声明的const state = { rows };属于冗余代码，直接使用useState返回的rows和setRows即可完成状态操作。

修复步骤 #

• 删除冗余的const state = { rows };声明
• 移除代码中多余的updated.userName);语法错误行
• 将onGridRowsUpdated方法内的this.setState替换为useState返回的setRows方法，使用函数式更新处理行数据修改
• 将ReactDataGrid组件的rowGetter属性值改为直接读取rows[i]

修复后完整代码 #

import React, {useState} from "react";
import ReactDOM from "react-dom";
import ReactDataGrid from "react-data-grid";
import axios from 'axios';

export default function App() {
  const [isLoaded, setIsLoaded] = useState(false);
  const [rows,setRows] = useState([]);

  React.useEffect(() => {
      async function anyNameFunction() {
        const response = await axios.get('http://localhost:8080/user/all');
        setIsLoaded(true);
        console.log(response.data);
        setRows(response.data);
      }
      anyNameFunction();
  }, [])

  const columns = [
    { key: "_id", name: "_id", width: 250 },
    { key: "id", name: "ID", width: 100 },
    { key: "userName", name: "User Name", width: 250, editable: true, enableCellSelect: true },
    { key: "userTelNo", name: "Tel No", width: 250, editable: true, enableCellSelect: true },
    { key: "userEmail", name: "EMail", width: 250, editable: true, enableCellSelect: true },
    { key: "userRole", name: "Role", width: 150, editable: true, enableCellSelect: true },
    { key: "dateSaved", name: "Date Saved", width: 250 },
];

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

  return (
    <ReactDataGrid
      columns={columns}
      rowGetter={i => rows[i]}
      onGridRowsUpdated={onGridRowsUpdated}
      rowsCount={rows.length}
      minHeight={500}
      enableCellSelect={true}
    />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

内容的提问来源于stack exchange，提问作者Ezani