Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Post an Article
Welcome To Ask or Share your Answers For Others

Categories

reactjs - Not Able To Show Data Successfully Received from SpringBoot Rest Service using Axion in a Material-UI DataGrid

0 votes
354 views
in Technique[技术] by (71.8m points)

reactjs - Not Able To Show Data Successfully Received from SpringBoot Rest Service using Axion in a Material-UI DataGrid

I am using React, node.js and Axios to connect to my Java/SpringBoot Rest GET service which returns a list of saved users as a JSON array (I've fixed the CORS issue and the two servers are able to connect). I have successfully connected and retrieved the REST data with Axios GET and I am able to see it in Console.log as a collection of JSON arrays, but now I want to display these in a Material-UI DataGrid.

Here is my code:

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>

However, I am getting this error message:

TypeError: Cannot read property 'root' of undefined

I opened up Developer Tools (F12) and found this message :

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.devel

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Why are you stringifying the response data ? As I could see from logs, there is a e.forEach expecting e as a list but you're passing it a string.


与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界，一个免费开放的程序员编程交流平台！开放，进步，分享！让技术改变生活，让极客改变未来！ Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

Just Browsing Browsing

1.4m articles

1.4m replys

5 comments

56.9k users

Most popular tags

Snow Theme by Q2A Market
Powered by Question2Answer
...