问题
I am trying to build a Redux based notificator based on this example: https://material-ui.com/components/snackbars/#CustomizedSnackbars.tsx
And here is what I came up with:
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);
When something is pushed into notification redux state (if I understand correctly, this component is getting rerendered) and I am getting the folowing error:
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)
...
I can't figure out that I am doing srong.
回答1:
Alert uses entries in theme.palette (e.g. theme.palette.success.main) that didn't used to exist, so you should be using the latest version (4.8.3) of @material-ui/core. The new entries in the palette were added in 4.8.1, so I suspect you are using something older than that.
来源：https://stackoverflow.com/questions/59827027/uncaught-typeerror-cannot-read-property-main-of-undefined-when-trying-to-use