TypeError：无法读取未定义 onGridRowsUpdated 的属性“setState”（使 React Data Grid 眼花缭乱）答案

【问题标题】：TypeError: Cannot read property 'setState' of undefined onGridRowsUpdated (adazzle React Data Grid )TypeError：无法读取未定义 onGridRowsUpdated 的属性“setState”（使 React Data Grid 眼花缭乱）
【发布时间】：2021-07-04 15:43:57
【问题描述】：

我正在使用 adazzle 的 React-Data-Grid 来显示来自 REST 后端服务的用户表数据。网格正确显示用户数据。当我双击网格中的一个单元格时，我可以编辑和更改单元格数据（正如在 react-data-grid 示例代码 https://adazzle.github.io/react-data-grid/docs/examples/simple-grid 中成功完成的那样）。但是，在编辑之后，当我移动到另一个单元格时，我收到错误：无法将属性“setState”读取为未定义，我在下面重现了错误消息。如何修复此错误？提前谢谢！

错误信息：

TypeError: Cannot read property 'setState' of undefined
onGridRowsUpdated
C:/kilostep_material/kilostep/src/App.js:59

> 59 | this.setState(state => {
     | ^  60 |   const rows = state.rows.slice();
  61 |   for (let i = fromRow; i <= toRow; i++) {
  62 |     rows[i] = { ...rows[i], ...updated };
View compiled
▶ 21 stack frames were collapsed.

App.js

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 state = { rows };



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


updated.userName);

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



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

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

【问题讨论】：

标签： javascript reactjs react-native react-data-grid

【解决方案1】：

在这种情况下，您尝试使用只能在类类型Components 中使用的this.setState 在您的功能组件中设置rows。关键字this 在功能组件中不可访问。您需要使用上面在代码中定义的 useState 挂钩中的 setRows，如下所示：

setRows(previousState => {
     //perform your calculation here
})

【讨论】：

非常感谢Sowmen！我已经投票并接受了你的回答！