3

Soy nuevo en react y creando una App me encuentro con este error, que no se realmente cuál es y porqué ocurre. Espero alguien pueda ayudarme.

Este es el error:

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.

introducir la descripción de la imagen aquí

Este es el código:

https://codepen.io/dacame77/pen/oNWLEdW?editors=1010

import React from 'react' 
import { makeStyles } from '@material-ui/core/styles';
import {
    Typography,
    IconButton,
    Toolbar,
    AppBar,
    Badge,
    SwipeableDrawer,
    List,
    Divider,
    ListItem,
    ListItemIcon,
    ListItemText,
} from '@material-ui/core';
import MenuIcon from '@material-ui/icons/Menu';
import {Notifications, Inbox, Mail }from '@material-ui/icons';
import { Link, withRouter } from 'react-router-dom';
import clsx from 'clsx';

const useStyles = makeStyles((theme) => ({
    root: {
      flexGrow: 1,
    },
    menuButton: {
      marginRight: theme.spacing(2),
    },
    title: {
      flexGrow: 1,
    },
    notifications:{
        marginRight: 18,
    },
    list: {
        width: 250,
      },
      fullList: {
        width: 'auto',
      },
    
  }));


const Navbar = () => {
    const classes = useStyles();
    const [state, setState] = React.useState({

        left: false,
    
      });

      const toggleDrawer = (anchor, open) => (event) => {
        if (
          event &&
          event.type === "keydown" &&
          (event.key === "Tab" || event.key === "Shift")
        ) {
          return;
        }
    
        setState({ ...state, [anchor]: open });
      };
    
      const list = (anchor) => (
        <div
          className={clsx(classes.list)}
          role="presentation"
          onClick={toggleDrawer(anchor, false)}
          onKeyDown={toggleDrawer(anchor, false)}
        >
          <List>
            {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
              <ListItem button key={text}>
                <ListItemIcon>
                  {index % 2 === 0 ? <Inbox /> : <Mail />}
                </ListItemIcon>
                <ListItemText primary={text} />
              </ListItem>
            ))}
          </List>
          <Divider />
          <List>
            {["All mail", "Trash", "Spam"].map((text, index) => (
              <ListItem button key={text}>
                <ListItemIcon>
                  {index % 2 === 0 ? <Inbox /> : <Mail />}
                </ListItemIcon>
                <ListItemText primary={text} />
              </ListItem>
            ))}
          </List>
        </div>
      );

    return (
        <>
            <div className={classes.root}>
                <AppBar position="static" color="secondary">
                    <Toolbar>
                        <Typography variant="h6" className={classes.title}>
                            LOGO
                        </Typography>
                        <div className="appbar--links">
                            <div className="border">
                                <Link to="/">Inicio</Link>
                            </div>
                            <div className="border">
                                <Link to="Categorias">Categorias</Link>
                            </div>
                            <div className="border">
                                <Link to="Publicar-servicio">Publicar Servicio</Link>
                            </div>
                            <div className="border">
                                <Link to="Contacto">Contactanos</Link>
                            </div>
                            <div className="border">
                                <Link to="Login">iniciar sesion</Link>
                            </div>
                        </div>
                        <IconButton>
                        <Badge color="error" badgeContent={3} className={classes.notifications}>
                            <Notifications color="primary"/>
                        </Badge>
                        </IconButton>
                        <div className="icon--menu">
                            <div>
                                {["left"].map((anchor) => (
                                <React.Fragment key={anchor}>
                                    <SwipeableDrawer anchor={anchor} open={state[anchor]} onClose={toggleDrawer(anchor,
                                        false)} onOpen={toggleDrawer(anchor, true)}>
                                        {list(anchor)}
                                    </SwipeableDrawer>
                            <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu"
                                onClick={toggleDrawer(anchor, true)}>
                                <MenuIcon />
                            </IconButton>
                                </React.Fragment>
                                ))}
                            </div>
                        </div>
                    </Toolbar>
                </AppBar>
                
            </div>
        </>
    )
}


export default withRouter(Navbar);

1 respuesta 1

0

El error que esta visualizando es esperado, dado a que esta usando la versión de Material-UI v4.x junto con React.StrictMode que resalta errores potencialmente peligrosos en una aplicación. En dicha versión de Material-UI se usan apis que para React ya están deprecadas.

Puede hacer dos cosas:

  1. Eliminar el uso de React.StrictMode en su código (No es recomendable hacer esto).
  2. Actualizar a MUI v5, dado que en esa versión este problema ya estaría resuelto.
  3. No hacer nada, los errores que envía React.StrictMode son solo en modo de desarrollo, en una compilación de producción esto no será visible en la consola.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.