时间戳

首页 > 解决方案 > TypeError：无法读取未定义 onGridRowsUpdated 的属性“setState”（使 React Data Grid 眼花缭乱）

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

问题描述

我正在使用 adazzle 的 React-Data-Grid 来显示来自 REST 后端服务的用户表数据。网格正确显示用户数据。当我双击网格中的一个单元格时，我可以编辑和更改单元格数据（正如在 react-data-grid 示例代码中成功完成的那样，https://adazzle.github.io/react-数据网格/文档/示例/简单网格）。但是，在编辑之后，当我移动到另一个单元格时，我收到错误：无法将属性“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.

应用程序.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);

标签： javascriptreactjsreact-nativereact-data-grid

解决方案

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

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

推荐阅读