Quiero mostrar una notificación de snackbar en caso de que mi componente de cámara devuelva algún error. Traté de poner el componente dentro de una función y pasar el mensaje de error como accesorios, y llamarlo en la instrucción if pero no funcionó. También intenté devolver la barra de refrigerios en sí, tampoco apareció, mientras que console.log o el mensaje de alerta funciona bien en ambos sentidos. No estoy mostrando una parte del código, porque es privado, solo estoy mostrando la parte del snack bar. De todos modos, si solo coloca un archivo console.log o alerta dentro de la función snackBar, lo devuelve bien. El problema es con la cafetería. Aquí está mi código:
import React from 'react' import Snackbar from '@mui/material/Snackbar' const Camera = () => { const [open, setOpen] = useState(false) const snackBar = (errorMessage) => { setOpen(true) return <Snackbar open={open} message={errorMessage} /> } let callback = { error: function (error) { console.log(error) if (error.code === 100) { return snackBar('error occured') } } else if (error.code === 104) { console.log('104') return snackBar('Please don't move the phone') } else if (error.code === 105) { console.log('105') setOpen(true) return snackBar('Try again')} }, } return ( <div> <h1>Camera</h1> </div> )}
Exportar cámara predeterminada
No está llamando a la devolución de llamada ni a la barra de bocadillos en ningún lado y tampoco está regresando en ningún JSX. También olvidó importar useState .
Si su intención es proporcionar una devolución de llamada para manejar un error (por ejemplo, al buscar) y luego mostrar la barra de bocadillos, aquí hay un ejemplo de cómo hacerlo con una muestra de devolución de llamada (pseudocódigo muy crudo)
import { Snackbar } from "@mui/material" import { useState } from "react" const Camera = () => { const [errorMessage, setErrorMessage] = useState(null) const callback = (error) => { if(error.code === '100') { setErrorMessage('Message 100') } else if(error.code === '105') { setErrorMessage('Message 105') } // ... add all your other else-ifs here } return ( <div> <h1>camera</h1> {errorMessage && <Snackbar open={errorMessage} message={errorMessage} />} </div> ) }