reactjs - 未捕获的类型错误 : Cannot read property 'main' of undefined when trying to use React MuiAlert

Question

我正在尝试基于此示例构建一个基于 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);

当某些东西被插入通知还原状态时(如果我理解正确，该组件正在重新渲染)并且我收到以下错误:

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

我不知道自己做得很好。

Answer 1

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