Tengo una aplicación ReactJS simple basada en ganchos (sin clases) usando StrictMode.
Estoy usando React versión 16.13.1 y Material-UI versión 4.9.10.
En la barra de aplicaciones estoy usando Drawer.
<div className={classes.root}> <AppBar position="static"> <Toolbar> <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu" onClick={handleDrawerOpen}> <MenuIcon /> </IconButton> <Typography variant="h6" className={classes.title}> Online Information </Typography> </Toolbar> </AppBar> <Drawer variant="persistent" anchor="left" open={open} ></Drawer> </div>Observo que cuando abro el Cajón, recibo la siguiente advertencia.
Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely .... in div (created by Transition) in Transition (created by ForwardRef(Fade)) in ForwardRef(Fade) (created by ForwardRef(Backdrop)) in ForwardRef(Backdrop) (created by WithStyles(ForwardRef(Backdrop))) in WithStyles(ForwardRef(Backdrop)) (created by ForwardRef(Modal)) in div (created by ForwardRef(Modal)) in ForwardRef(Portal) (created by ForwardRef(Modal)) in ForwardRef(Modal) (created by ForwardRef(Drawer)) in ForwardRef(Drawer) (created by WithStyles(ForwardRef(Drawer)))Encontré alguna referencia en la web para este problema, pero aún no puedo encontrar la manera de resolverlo.
¿Puede alguien agregar alguna solución para este problema?
Gracias
De acuerdo con el registro de cambios de Material-ui, debería resolverse en V5, que todavía está en alfa.
Parece que, al menos en algunos casos, este problema se debe a createMuiTheme . Puede resolver este problema utilizando el creador de temas experimental (inestable)
Si desea obtener el creador del tema experimental en lugar de eliminar React.StrictMode , puede cambiar su importación desde:
import { createMuiTheme } from '@material-ui/core';Para
import { unstable_createMuiStrictModeTheme as createMuiTheme } from '@material-ui/core';V5 está oficialmente disponible (y ahora se llama MUI ). Si la actualización es una opción para usted, también debería resolver este problema.
Esta es una advertencia de modo estricto
Las comprobaciones de modo estricto se ejecutan solo en modo de desarrollo; no afectan la construcción de producción.
ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') );para
ReactDOM.render( <App />, document.getElementById('root') );Esta advertencia se debe al componente Transición que se utiliza en muchos de los componentes de material-ui como Cajón, Información sobre herramientas, Snackbar, etc.
Personalmente, enfrenté esta advertencia en todos ellos, pero solo arreglé esto para el componente Snackbar.
La solución es crear una referencia y pasarla a su componente raíz. Luego, reenvíe manualmente la referencia a sus componentes secundarios que usan Transición.
Aquí está el código para el componente Snackbar que me solucionó el problema. Ya que es solo una advertencia, probablemente lo ignore. No es necesario eliminar StrictMode. Se solucionará en futuras versiones de material-ui.
import React, { useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; //MUI Stuff import { makeStyles } from '@material-ui/core/styles'; import Snackbar from '@material-ui/core/Snackbar'; import MuiAlert from '@material-ui/lab/Alert'; // Redux import { hideAlert } from '../../redux/actions/uiActions'; import Slide from '@material-ui/core/Slide'; const Alert = React.forwardRef((props, ref) => { return <MuiAlert ref={ref} elevation={6} variant="filled" {...props} />; }); const SlideTransition = React.forwardRef((props, ref) => { return <Slide ref={ref} {...props} direction="left" />; }); const useStyles = makeStyles((theme) => ({ root: { flexGrow: 1, }, snackbar: { [theme.breakpoints.down('sm')]: { bottom: 65, }, }, })); const SnackAlert = () => { const snackbarRef = React.createRef(null); const classes = useStyles(); const { alert, alertType, alertMessage } = useSelector((state) => ({ alert: state.ui.alert, alertType: state.ui.alertType, alertMessage: state.ui.alertMessage, })); const dispatch = useDispatch(); const [open, setOpen] = React.useState(false); useEffect(() => { setOpen(alert); }, [alert]); const handleClose = () => { setOpen(false); dispatch(hideAlert()); }; return ( <div className={classes.root}> <Snackbar ref={snackbarRef} className={classes.snackbar} open={open} anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }} autoHideDuration={5000} onClose={handleClose} message={alertMessage} TransitionComponent={SlideTransition} > <Alert onClose={handleClose} severity={alertType}> {alertMessage} </Alert> </Snackbar> </div> ); }; export default SnackAlert;