时间戳

首页 > 解决方案 > Uncaught ReferenceError: e is not defined / material ui data-grid

javascript - Uncaught ReferenceError: e is not defined / material ui data-grid

问题描述

React/Material-ui newbi here 并得到一个我无法弄清楚的错误。我正在使用 material-ui/data-grid 加载组件，而 datagrid 只是在应用程序中返回“发生错误”。加载没有行和列const的组件，不返回错误。但是数据网格中没有数据将是原因。

查看错误下方的组件

浏览器控制台消息：

Uncaught ReferenceError: e is not defined
    at index-esm.js:15
    at renderWithHooks (react-dom.development.js:14985)
    at updateFunctionComponent (react-dom.development.js:17356)
    at updateSimpleMemoComponent (react-dom.development.js:17215)
    at updateMemoComponent (react-dom.development.js:17092)
    at beginWork (react-dom.development.js:19135)
    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:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at flushSyncCallbackQueue (react-dom.development.js:11309)
    at flushPassiveEffectsImpl (react-dom.development.js:23620)
    at unstable_runWithPriority (scheduler.development.js:468)
    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:417)
    at flushWork (scheduler.development.js:390)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:157)
(anonymous) @ index-esm.js:15
renderWithHooks @ react-dom.development.js:14985
updateFunctionComponent @ react-dom.development.js:17356
updateSimpleMemoComponent @ react-dom.development.js:17215
updateMemoComponent @ react-dom.development.js:17092
beginWork @ react-dom.development.js:19135
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:468
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:468
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
(anonymous) @ react-dom.development.js:23324
workLoop @ scheduler.development.js:417
flushWork @ scheduler.development.js:390
performWorkUntilDeadline @ scheduler.development.js:157
4index.js:2178 The above error occurred in one of your React components:

    at http://localhost:3000/static/js/bundle.js:40271:65893
    at _i (http://localhost:3000/static/js/bundle.js:40271:70997)
    at div
    at http://localhost:3000/static/js/bundle.js:40271:71855
    at div
    at http://localhost:3000/static/js/bundle.js:40271:50127
    at div
    at Kc (http://localhost:3000/static/js/bundle.js:40271:208889)
    at Yc (http://localhost:3000/static/js/bundle.js:40271:210674)
    at Zc (http://localhost:3000/static/js/bundle.js:40271:208899)
    at Xc (http://localhost:3000/static/js/bundle.js:40271:209455)
    at div
    at NoSsr (http://localhost:3000/static/js/bundle.js:19823:24)
    at http://localhost:3000/static/js/bundle.js:40271:48787
    at Uc (http://localhost:3000/static/js/bundle.js:40271:208597)
    at http://localhost:3000/static/js/bundle.js:40271:221363
    at http://localhost:3000/static/js/bundle.js:40271:222078
    at div
    at div
    at CreateDataDocumentation
    at div
    at Private
    at div
    at App (http://localhost:3000/static/js/bundle.js:119397:59)
    at Route (http://localhost:3000/static/js/bundle.js:106214:29)
    at Router (http://localhost:3000/static/js/bundle.js:105843:30)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:105449:35)

React will try to recreate this component tree from scratch using the error boundary you provided, Zc.
__stack_frame_overlay_proxy_console__ @ index.js:2178
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
updateClassInstance @ react-dom.development.js:13013
updateClassComponent @ react-dom.development.js:17432
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:468
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:468
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
(anonymous) @ react-dom.development.js:23324
workLoop @ scheduler.development.js:417
flushWork @ scheduler.development.js:390
performWorkUntilDeadline @ scheduler.development.js:157
index.js:2178 Warning: React does not recognize the `hasError` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `haserror` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    at div
    at http://localhost:3000/static/js/bundle.js:40271:51536
    at http://localhost:3000/static/js/bundle.js:40271:169168
    at div
    at Kc (http://localhost:3000/static/js/bundle.js:40271:208889)
    at Zc (http://localhost:3000/static/js/bundle.js:40271:208899)
    at Xc (http://localhost:3000/static/js/bundle.js:40271:209455)
    at div
    at NoSsr (http://localhost:3000/static/js/bundle.js:19823:24)
    at http://localhost:3000/static/js/bundle.js:40271:48787
    at Uc (http://localhost:3000/static/js/bundle.js:40271:208597)
    at http://localhost:3000/static/js/bundle.js:40271:221363
    at http://localhost:3000/static/js/bundle.js:40271:222078
    at div
    at div
    at CreateDataDocumentation
    at div
    at Private
    at div
    at App (http://localhost:3000/static/js/bundle.js:119397:59)
    at Route (http://localhost:3000/static/js/bundle.js:106214:29)
    at Router (http://localhost:3000/static/js/bundle.js:105843:30)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:105449:35)
__stack_frame_overlay_proxy_console__ @ index.js:2178
printWarning @ react-dom.development.js:67
error @ react-dom.development.js:43
validateProperty$1 @ react-dom.development.js:3513
warnUnknownProperties @ react-dom.development.js:3559
validateProperties$2 @ react-dom.development.js:3583
validatePropertiesInDevelopment @ react-dom.development.js:8765
setInitialProperties @ react-dom.development.js:9041
finalizeInitialChildren @ react-dom.development.js:10201
completeWork @ react-dom.development.js:19470
completeUnitOfWork @ react-dom.development.js:22815
performUnitOfWork @ react-dom.development.js:22787
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:468
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:468
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
(anonymous) @ react-dom.development.js:23324
workLoop @ scheduler.development.js:417
flushWork @ scheduler.development.js:390
performWorkUntilDeadline @ scheduler.development.js:157
4index.js:2178 Material-UI: GridErrorHandler - An unexpected error occurred. Error: e is not defined.  ReferenceError: e is not defined
    at index-esm.js:15
    at renderWithHooks (react-dom.development.js:14985)
    at updateFunctionComponent (react-dom.development.js:17356)
    at updateSimpleMemoComponent (react-dom.development.js:17215)
    at updateMemoComponent (react-dom.development.js:17092)
    at beginWork (react-dom.development.js:19135)
    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:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at flushSyncCallbackQueue (react-dom.development.js:11309)
    at flushPassiveEffectsImpl (react-dom.development.js:23620)
    at unstable_runWithPriority (scheduler.development.js:468)
    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:417)
    at flushWork (scheduler.development.js:390)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:157) undefined
__stack_frame_overlay_proxy_console__ @ index.js:2178
t.<computed> @ index-esm.js:15
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:468
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:468
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:468
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
(anonymous) @ react-dom.development.js:23324
workLoop @ scheduler.development.js:417
flushWork @ scheduler.development.js:390
performWorkUntilDeadline @ scheduler.development.js:157
index.js:2178 Warning: React does not recognize the `errorInfo` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `errorinfo` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    at div
    at http://localhost:3000/static/js/bundle.js:40271:51536
    at http://localhost:3000/static/js/bundle.js:40271:169168
    at div
    at Kc (http://localhost:3000/static/js/bundle.js:40271:208889)
    at Zc (http://localhost:3000/static/js/bundle.js:40271:208899)
    at Xc (http://localhost:3000/static/js/bundle.js:40271:209455)
    at div
    at NoSsr (http://localhost:3000/static/js/bundle.js:19823:24)
    at http://localhost:3000/static/js/bundle.js:40271:48787
    at Uc (http://localhost:3000/static/js/bundle.js:40271:208597)
    at http://localhost:3000/static/js/bundle.js:40271:221363
    at http://localhost:3000/static/js/bundle.js:40271:222078
    at div
    at div
    at CreateDataDocumentation
    at div
    at Private
    at div
    at App (http://localhost:3000/static/js/bundle.js:119397:59)
    at Route (http://localhost:3000/static/js/bundle.js:106214:29)
    at Router (http://localhost:3000/static/js/bundle.js:105843:30)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:105449:35)

应用程序.js

function App () {

return ( 
  <div>
      <Private />
  </div>

);
}

export default App;

私有.js

function Private () {
    return (
      <div>
  private component
    <Row><PlatformNavBar /></Row>
   <MyDataGrid />
       
    </div>

);         
}
export default Private;

MyDataGrid.js

import { DataGrid } from '@material-ui/data-grid';

function MyDataGrid() {

  return (

  <div style={{ height: 300, width: '100%' }}>
    <DataGrid rows={rows} columns={columns}/>
  </div>
  );
  }

  const columns = [
    { field: 'id', headerName: 'ID', width: 90 },
  {
    field: 'firstName',
    headerName: 'First name',
    width: 150,
    editable: true,
  },
  {
    field: 'lastName',
    headerName: 'Last name',
    width: 150,
    editable: true,
  },
  {
    field: 'age',
    headerName: 'Age',
    type: 'number',
    width: 110,
    editable: true,
  },
  ];
  
   const rows = [
    { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
    { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
    { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
    { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
    { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
    { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
    { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
    { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
    { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
   ];

export default MyDataGrid;

我该如何解决这个问题？

标签： javascriptreactjsmaterial-ui

解决方案

它只是归结为过时的反应脚本。我运行了一个新的构建命令并看到 minify 失败： https ://github.com/mui-org/material-ui/issues/11044

推荐阅读