TypeError: Cannot read property 'setState' of undefined onGridRowsUpdated (adazzle React Data Grid )

Question

我正在使用 adazzle 的 React-Data-Grid 来显示来自 REST 后端服务的 table 用户数据。网格正确显示用户数据。当我双击网格中的一个单元格时，我能够编辑和更改单元格数据（正如在 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);

Answer 1

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

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

TypeError: Cannot read property 'setState' of undefined onGridRowsUpdated (adazzle React Data Grid )

TypeError: Cannot read property 'setState' of undefined onGridRowsUpdated (adazzle React Data Grid )

javascript

reactjs

react-native

react-data-grid