• 主页
  • 无法在Material-UI DataGrid中使用Axion显示从SpringBoot Rest服务成功接收的数据

无法在Material-UI DataGrid中使用Axion显示从SpringBoot Rest服务成功接收的数据

Posted by admin

我使用React、node.js和Axios连接到我的Java/SpringBoot Rest GET服务，该服务以JSON数组的形式返回已保存用户的列表(我已经修复了CORS问题，两个服务器可以连接)。我已经成功地使用Axios GET连接和检索了REST数据，并且能够在Console.log中将其作为JSON数组的集合来查看，但是现在我希望在Material-UI DataGrid中显示这些数据。

下面是我的代码：

App.js：

import React, {useState, useEffect} from "react";
//import { axios } from "axios";
import { DataGrid } from '@material-ui/data-grid';


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


  
  useEffect(() => {
    const axios = require('axios').default;
       

    axios
      .get('http://localhost:8080/user/all')
      .then((response) => {
        setIsLoaded(true);
        setRowData(response.data);
        console.log("JSON.stringify(response.data) : " + JSON.stringify(response.data));
      });
  }, []);





const columns = [
 { field: "id", headerName: "ID", width: 10 },
 { field: "userName", headerName: "Name", width: 170 },
 { field: "userTelNo", headerName: "Tel No", width: 70 },
 { field: "userEmail", headerName: "EMail", width: 100 },
 { field: "userRole", headerName: "Role", width: 100 },
];




return( 
  <DataGrid 
    columns={columns}
    rows={rowData}
    id="id"
    pageSize={15}
  />
);



 }

Index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.querySelector('#root'));

Index.html：

<body>
  <!-- Fonts to support Material Design -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
  <!-- Icons to support Material Design -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <div id="root"></div>
</body>

但是，我收到了这个错误消息：

TypeError: Cannot read property 'root' of undefined

我打开了开发人员工具(F12)，发现了这条消息：

Toolbar.js:47 Uncaught TypeError: Cannot read property 'root' of undefined
    at Toolbar (Toolbar.js:47)
    at renderWithHooks (react-dom.development.js:14985)
    at updateForwardRef (react-dom.development.js:17044)
    at beginWork (react-dom.development.js:19098)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)
    at renderRootSync (react-dom.development.js:22670)
    at performSyncWorkOnRoot (react-dom.development.js:22293)
    at react-dom.development.js:11327
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at flushSyncCallbackQueue (react-dom.development.js:11309)
    at unbatchedUpdates (react-dom.development.js:22438)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:26020)
    at Object.render (react-dom.development.js:26103)
    at Module.<anonymous> (index.js:6)
    at Module../src/index.js (index.js:7)
    at __webpack_require__ (bootstrap:851)
    at fn (bootstrap:150)
    at Object.1 (index.js:7)
    at __webpack_require__ (bootstrap:851)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1
Toolbar @ Toolbar.js:47
renderWithHooks @ react-dom.development.js:14985
updateForwardRef @ react-dom.development.js:17044
beginWork @ react-dom.development.js:19098
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
unbatchedUpdates @ react-dom.development.js:22438
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
(anonymous) @ index.js:6
./src/index.js @ index.js:7
__webpack_require__ @ bootstrap:851
fn @ bootstrap:150
1 @ index.js:7
__webpack_require__ @ bootstrap:851
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1 The above error occurred in the <WithStyles(ForwardRef(Toolbar))> component:

    at Toolbar (http://localhost:3000/static/js/0.chunk.js:13576:23)
    at div
    at TablePagination (http://localhost:3000/static/js/0.chunk.js:12508:37)
    at kl (http://localhost:3000/static/js/0.chunk.js:21801:13)
    at div
    at http://localhost:3000/static/js/0.chunk.js:21257:16
    at http://localhost:3000/static/js/0.chunk.js:21756:26
    at div
    at ma (http://localhost:3000/static/js/0.chunk.js:23250:1)
    at div
    at http://localhost:3000/static/js/0.chunk.js:21578:16
    at div
    at http://localhost:3000/static/js/0.chunk.js:21681:15
    at http://localhost:3000/static/js/0.chunk.js:23400:65
    at http://localhost:3000/static/js/0.chunk.js:23751:16
    at App (http://localhost:3000/static/js/main.chunk.js:32:89)

React will try to recreate this component tree from scratch using the error boundary you provided, ma.
console.<computed> @ index.js:1
logCapturedError @ react-dom.development.js:20085
update.payload @ react-dom.development.js:20133
getStateFromUpdate @ react-dom.development.js:12102
processUpdateQueue @ react-dom.development.js:12250
resumeMountClassInstance @ react-dom.development.js:12921
updateClassComponent @ react-dom.development.js:17430
beginWork @ react-dom.development.js:19073
beginWork$1 @ react-dom.development.js:23940
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
unbatchedUpdates @ react-dom.development.js:22438
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
(anonymous) @ index.js:6
./src/index.js @ index.js:7
__webpack_require__ @ bootstrap:851
fn @ bootstrap:150
1 @ index.js:7
__webpack_require__ @ bootstrap:851
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1 Material-UI: GridComponent - An unexpected error occurred. Error: Cannot read property 'root' of undefined.  TypeError: Cannot read property 'root' of undefined
    at Toolbar (Toolbar.js:47)
    at renderWithHooks (react-dom.development.js:14985)
    at updateForwardRef (react-dom.development.js:17044)
    at beginWork (react-dom.development.js:19098)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)
    at renderRootSync (react-dom.development.js:22670)
    at performSyncWorkOnRoot (react-dom.development.js:22293)
    at react-dom.development.js:11327
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at flushSyncCallbackQueue (react-dom.development.js:11309)
    at unbatchedUpdates (react-dom.development.js:22438)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:26020)
    at Object.render (react-dom.development.js:26103)
    at Module.<anonymous> (index.js:6)
    at Module../src/index.js (index.js:7)
    at __webpack_require__ (bootstrap:851)
    at fn (bootstrap:150)
    at Object.1 (index.js:7)
    at __webpack_require__ (bootstrap:851)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1 undefined
console.<computed> @ index.js:1
t.<computed> @ index-esm.js:1
logError @ index-esm.js:15
componentDidCatch @ index-esm.js:15
callback @ react-dom.development.js:20159
callCallback @ react-dom.development.js:12318
commitUpdateQueue @ react-dom.development.js:12339
commitLifeCycles @ react-dom.development.js:20709
commitLayoutEffects @ react-dom.development.js:23426
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
unbatchedUpdates @ react-dom.development.js:22438
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
(anonymous) @ index.js:6
./src/index.js @ index.js:7
__webpack_require__ @ bootstrap:851
fn @ bootstrap:150
1 @ index.js:7
__webpack_require__ @ bootstrap:851
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
Show 4 more frames
index-esm.js:1 Material-UI: useResizeContainer - The parent of the grid has an empty height.
You need to make sure the container has an intrinsic height.
The grid displays with a height of 0px.

You can find a solution in the docs:
https://material-ui.com/components/data-grid/rendering/#layout
t.<computed> @ index-esm.js:1
(anonymous) @ index-esm.js:15
setTimeout (async)
(anonymous) @ index-esm.js:15
(anonymous) @ index-esm.js:15
(anonymous) @ useEventCallback.js:15
(anonymous) @ index-esm.js:15
commitHookEffectListMount @ react-dom.development.js:20573
commitLifeCycles @ react-dom.development.js:20634
commitLayoutEffects @ react-dom.development.js:23426
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
(anonymous) @ index.js:6
./src/index.js @ index.js:7
__webpack_require__ @ bootstrap:851
fn @ bootstrap:150
1 @ index.js:7
__webpack_require__ @ bootstrap:851
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
App.js:21 JSON.stringify(response.data) : [{"id":1,"userName":"admin","userPassword":"admin123","userTelNo":"012-104-1001","userEmail":"admin@fsgsm.com","userRole":"管理员","loginDateTime":"2021-01-25T09:57:38","entryDateTime":"2021-01-25T09:57:31","updateDateTime":"2021-01-25T09:57:40"},{"id":2,"userName":"t","userPassword":"admin123","userTelNo":"","userEmail":"","userRole":"开发 人员","loginDateTime":"2021-01-25T11:15:53","entryDateTime":"2021-01-25T11:15:53","updateDateTime":"2021-01-25T11:15:53"},{"id":3,"userName":"324","userPassword":"43444","userTelNo":"4334","userEmail":"344","userRole":"开发 人员","loginDateTime":"2021-01-25T23:12:38","entryDateTime":"2021-01-25T23:12:38","updateDateTime":"2021-01-25T23:12:38"}]
index-esm.js:15 Uncaught TypeError: e.forEach is not a function
    at Zl (index-esm.js:15)
    at index-esm.js:15
    at index-esm.js:1
    at index-esm.js:15
    at invokePassiveEffectCreate (react-dom.development.js:23487)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at flushPassiveEffectsImpl (react-dom.development.js:23574)
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushPassiveEffects (react-dom.development.js:23447)
    at react-dom.development.js:23324
    at workLoop (scheduler.development.js:590)
    at flushWork (scheduler.development.js:545)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:157)
Zl @ index-esm.js:15
(anonymous) @ index-esm.js:15
(anonymous) @ index-esm.js:1
(anonymous) @ index-esm.js:15
invokePassiveEffectCreate @ react-dom.development.js:23487
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
flushPassiveEffectsImpl @ react-dom.development.js:23574
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
(anonymous) @ react-dom.development.js:23324
workLoop @ scheduler.development.js:590
flushWork @ scheduler.development.js:545
performWorkUntilDeadline @ scheduler.development.js:157
index.js:1 The above error occurred in the <ForwardRef> component:

    at http://localhost:3000/static/js/0.chunk.js:23400:65
    at http://localhost:3000/static/js/0.chunk.js:23751:16
    at App (http://localhost:3000/static/js/main.chunk.js:32:89)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
console.<computed> @ index.js:1
logCapturedError @ react-dom.development.js:20085
update.callback @ react-dom.development.js:20118
callCallback @ react-dom.development.js:12318
commitUpdateQueue @ react-dom.development.js:12339
commitLifeCycles @ react-dom.development.js:20736
commitLayoutEffects @ react-dom.development.js:23426
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
flushPassiveEffectsImpl @ react-dom.development.js:23620
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
(anonymous) @ react-dom.development.js:23324
workLoop @ scheduler.development.js:590
flushWork @ scheduler.development.js:545
performWorkUntilDeadline @ scheduler.development.js:157
index-esm.js:15 Uncaught TypeError: e.forEach is not a function
    at Zl (index-esm.js:15)
    at index-esm.js:15
    at index-esm.js:1
    at index-esm.js:15
    at invokePassiveEffectCreate (react-dom.development.js:23487)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at flushPassiveEffectsImpl (react-dom.development.js:23574)
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushPassiveEffects (react-dom.development.js:23447)
    at react-dom.development.js:23324
    at workLoop (scheduler.development.js:590)
    at flushWork (scheduler.development.js:545)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:157)
Zl @ index-esm.js:15
(anonymous) @ index-esm.js:15
(anonymous) @ index-esm.js:1
(anonymous) @ index-esm.js:15
invokePassiveEffectCreate @ react-dom.development.js:23487
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
flushPassiveEffectsImpl @ react-dom.development.js:23574
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
(anonymous) @ react-dom.development.js:23324
workLoop @ scheduler.development.js:590
flushWork @ scheduler.development.js:545
performWorkUntilDeadline @ scheduler.development.js:157
webpackHotDevClient.js:138 src\App.js

看一眼开发人员工具的输出，就会发现我成功地获得了数据：

App.js:21 JSON.stringify(response.data) : [{"id":1,"userName":"admin","userPassword":"admin123","userTelNo":"012-104-1001","userEmail":"admin@fsgsm.com","userRole":"管理员","loginDateTime":"2021-01-25T09:57:38","entryDateTime":"2021-01-25T09:57:31","updateDateTime":"2021-01-25T09:57:40"},{"id":2,"userName":"t","userPassword":"admin123","userTelNo":"","userEmail":"","userRole":"开发 人员","loginDateTime":"2021-01-25T11:15:53","entryDateTime":"2021-01-25T11:15:53","updateDateTime":"2021-01-25T11:15:53"},{"id":3,"userName":"324","userPassword":"43444","userTelNo":"4334","userEmail":"344","userRole":"开发 人员","loginDateTime":"2021-01-25T23:12:38","entryDateTime":"2021-01-25T23:12:38","updateDateTime":"2021-01-25T23:12:38"}]
index-esm.js:15 Uncaught TypeError: e.forEach is not a function

如何让上面的3行JSON数据(或从SpringBoot后端返回的任何行)显示在Material-UI data Grid中？

转载请注明出处:http://www.jxbyjx.net/article/20230521/2345766.html