未捕获的类型错误：尝试使用 React MuiAlert 时无法读取未定义的属性“主”

Posted 2023-02-22

【中文标题】未捕获的类型错误：尝试使用 React MuiAlert 时无法读取未定义的属性“主”

【英文标题】：Uncaught TypeError: Cannot read property 'main' of undefined when trying to use React MuiAlert

【发布时间】：2020-05-06 16:24:06

【问题描述】：

我正在尝试基于此示例构建基于 Redux 的通知器： https://material-ui.com/components/snackbars/#CustomizedSnackbars.tsx

这是我想出的：

import  Snackbar  from '@material-ui/core';
import MuiAlert,  AlertProps  from '@material-ui/lab/Alert';
import React from 'react';
import  connect  from 'react-redux';
import  createSelector  from 'reselect';
import  ProgramCategoryActions  from '../../program/store/program-category.actions';
import  NotificationState  from './model/notification-state';
import  NotificationSelectors  from './store/notification.selectors';

interface NotificatorProps 
  notification?: NotificationState;
  close: () => void;


// tslint:disable-next-line:function-name
function Alert(props: AlertProps) 
  return <MuiAlert elevation=6 variant="filled" ...props />;


export const PureNotificator: React.FC<NotificatorProps> = ( notification, close ) => 
  const handleClose = (event?: React.SyntheticEvent, reason?: string) => 
    if (reason === 'clickaway') 
      return;
    

    close();
  ;

  return (
      <Snackbar open=!!notification?.message autoHideDuration=notification?.duration onClose=handleClose>
        <Alert onClose=handleClose severity=notification?.severity >
          notification?.message
        </Alert>
      </Snackbar>
  );
;

const mapStateToProps = createSelector(NotificationSelectors.getLast, notification => ( notification ));

const mapDispatchToProps = 
  close: ProgramCategoryActions.fetchAll.start,
;

export const Notificator = connect(mapStateToProps, mapDispatchToProps)(PureNotificator);

当某些东西被推送到通知 redux 状态时（如果我理解正确，这个组件正在重新渲染）并且我收到以下错误：

Alert.js:27 Uncaught TypeError: Cannot read property 'main' of undefined
    at styles (Alert.js:27)
    at Object.create (getStylesCreator.js:20)
    at attach (makeStyles.js:94)
    at makeStyles.js:234
    at useSynchronousEffect (makeStyles.js:187)
    at makeStyles.js:226
    at WithStyles (withStyles.js:52)
    at renderWithHooks (react-dom.development.js:16317)
    at updateForwardRef (react-dom.development.js:18167)
    at beginWork$1 (react-dom.development.js:20198)
    at htmlUnknownElement.callCallback (react-dom.development.js:337)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:386)
    at invokeGuardedCallback (react-dom.development.js:439)
    at beginWork$$1 (react-dom.development.js:25768)
    at performUnitOfWork (react-dom.development.js:24682)
    at workLoopSync (react-dom.development.js:24658)
    at performSyncWorkOnRoot (react-dom.development.js:24247)
    at react-dom.development.js:12285
    at unstable_runWithPriority (scheduler.development.js:701)
    at runWithPriority$2 (react-dom.development.js:12231)
    at flushSyncCallbackQueueImpl (react-dom.development.js:12280)
    at flushSyncCallbackQueue (react-dom.development.js:12268)
    at batchedUpdates$1 (react-dom.development.js:24368)
    at Object.notify (Subscription.js:23)
    at Subscription.notifyNestedSubs (Subscription.js:65)
    at Subscription.handleChangeWrapper (Subscription.js:70)
    at Object.dispatch (redux.js:221)
    at e (<anonymous>:1:40553)
    at redux-saga-core.esm.js:1423
    at dispatch (redux.js:638)
    at io-6de156f3.js:146
    at redux-saga-core.esm.js:484
    at exec (redux-saga-core.esm.js:30)
    at flush (redux-saga-core.esm.js:88)
    at asap (redux-saga-core.esm.js:45)
    at runPutEffect (redux-saga-core.esm.js:480)
    at runEffect (redux-saga-core.esm.js:1216)
    at digestEffect (redux-saga-core.esm.js:1283)
    at next (redux-saga-core.esm.js:1173)
    at currCb (redux-saga-core.esm.js:1263)
styles @ Alert.js:27
create @ getStylesCreator.js:20
attach @ makeStyles.js:94
(anonymous) @ makeStyles.js:234
useSynchronousEffect @ makeStyles.js:187
(anonymous) @ makeStyles.js:226
WithStyles @ withStyles.js:52
renderWithHooks @ react-dom.development.js:16317
updateForwardRef @ react-dom.development.js:18167
beginWork$1 @ react-dom.development.js:20198
callCallback @ react-dom.development.js:337
invokeGuardedCallbackDev @ react-dom.development.js:386
invokeGuardedCallback @ react-dom.development.js:439
beginWork$$1 @ react-dom.development.js:25768
performUnitOfWork @ react-dom.development.js:24682
workLoopSync @ react-dom.development.js:24658
performSyncWorkOnRoot @ react-dom.development.js:24247
(anonymous) @ react-dom.development.js:12285
unstable_runWithPriority @ scheduler.development.js:701
runWithPriority$2 @ react-dom.development.js:12231
flushSyncCallbackQueueImpl @ react-dom.development.js:12280
flushSyncCallbackQueue @ react-dom.development.js:12268
batchedUpdates$1 @ react-dom.development.js:24368
notify @ Subscription.js:23
notifyNestedSubs @ Subscription.js:65
handleChangeWrapper @ Subscription.js:70
dispatch @ redux.js:221
e @ VM676:1
(anonymous) @ redux-saga-core.esm.js:1423
dispatch @ redux.js:638
(anonymous) @ io-6de156f3.js:146
(anonymous) @ redux-saga-core.esm.js:484
exec @ redux-saga-core.esm.js:30
flush @ redux-saga-core.esm.js:88
asap @ redux-saga-core.esm.js:45
runPutEffect @ redux-saga-core.esm.js:480
runEffect @ redux-saga-core.esm.js:1216
digestEffect @ redux-saga-core.esm.js:1283
next @ redux-saga-core.esm.js:1173
currCb @ redux-saga-core.esm.js:1263
Promise.then (async)
resolvePromise @ redux-saga-core.esm.js:407
runCallEffect @ redux-saga-core.esm.js:538
runEffect @ redux-saga-core.esm.js:1216
digestEffect @ redux-saga-core.esm.js:1283
next @ redux-saga-core.esm.js:1173
proc @ redux-saga-core.esm.js:1120
runCallEffect @ redux-saga-core.esm.js:544
runEffect @ redux-saga-core.esm.js:1216
digestEffect @ redux-saga-core.esm.js:1283
next @ redux-saga-core.esm.js:1173
currCb @ redux-saga-core.esm.js:1263
takeCb @ redux-saga-core.esm.js:515
put @ redux-saga-core.esm.js:350
(anonymous) @ redux-saga-core.esm.js:388
exec @ redux-saga-core.esm.js:30
flush @ redux-saga-core.esm.js:88
asap @ redux-saga-core.esm.js:45
chan.put @ redux-saga-core.esm.js:387
(anonymous) @ redux-saga-core.esm.js:1425
dispatch @ VM676:1
(anonymous) @ redux.js:476
handleFormSubmit @ ProgramCategoryForm.tsx:85
callCallback @ react-dom.development.js:337
invokeGuardedCallbackDev @ react-dom.development.js:386
invokeGuardedCallback @ react-dom.development.js:439
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:454
executeDispatch @ react-dom.development.js:585
executeDispatchesInOrder @ react-dom.development.js:610
executeDispatchesAndRelease @ react-dom.development.js:713
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:722
forEachAccumulated @ react-dom.development.js:694
runEventsInBatch @ react-dom.development.js:739
runExtractedPluginEventsInBatch @ react-dom.development.js:881
handleTopLevel @ react-dom.development.js:5831
batchedEventUpdates$1 @ react-dom.development.js:24378
batchedEventUpdates @ react-dom.development.js:1414
dispatchEventForPluginEventSystem @ react-dom.development.js:5927
attemptToDispatchEvent @ react-dom.development.js:6044
dispatchEvent @ react-dom.development.js:5947
unstable_runWithPriority @ scheduler.development.js:701
runWithPriority$2 @ react-dom.development.js:12231
discreteUpdates$1 @ react-dom.development.js:24395
discreteUpdates @ react-dom.development.js:1439
dispatchDiscreteEvent @ react-dom.development.js:5914
Show 54 more frames
index.js:1406 The above error occurred in the <WithStyles(ForwardRef(Alert))> component:
    in WithStyles(ForwardRef(Alert)) (at Notificator.tsx:17)
    in Alert (at Notificator.tsx:31)
    in Transition (created by ForwardRef(Grow))
    in ForwardRef(Grow) (created by ForwardRef(Snackbar))
    in div (created by ForwardRef(ClickAwayListener))
    in ForwardRef(ClickAwayListener) (created by ForwardRef(Snackbar))
    in ForwardRef(Snackbar) (created by WithStyles(ForwardRef(Snackbar)))
    in WithStyles(ForwardRef(Snackbar)) (at Notificator.tsx:30)
...

我不知道我做错了。

【参考方案1】：

Alert 使用以前不存在的entries in theme.palette（例如theme.palette.success.main），因此您应该使用@material-ui/core 的最新版本（4.8.3）。调色板中的新条目是在 4.8.1 中添加的，所以我怀疑您使用的是比这更旧的东西。

【讨论】：

如果你使用 react-admin 4.3.3 latest，你不能使用最新的 material-ui 4.9.11，所以你应该手动将这些颜色添加到你的调色板中