我正在尝试基于此示例构建一个基于 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)
...
我无法弄清楚我在做srong。
Alert使用theme.palette中的条目(例如theme.palette.success.main(，以前不存在，因此您应该使用最新版本 (4.8.3( 的@material-ui/core。调色板中的新条目是在 4.8.1 中添加的，所以我怀疑您使用的是比这更旧的东西。