0

estoy trabajando en un proyecto en React.js donde enseño un par de propiedades de un objeto llamado device, este objeto consta de client, state y device. los valores los obtengo de una base de datos de google firebase pero cuando el usuario intenta consultar un documento que no existe la app se crashea con el error de que no se han podido leer las propiedades de device, sabiendo que cuando el documento no existe retorna undefined. el codigo del componente que chequea la base de datos, y enseña los resultados es el siguiente:

import { useState } from "react"
import { Button } from "./Button/Button"
import { TextField } from "./TextField/TextField"
import { doc, getDoc } from "firebase/firestore"
import { db } from "../../firebase"

export const CheckPage = () => {

    const [device, setDevice] = useState({ device: 'desconocido', state: 'desconocido' })

    async function checkStatus() {
        const docRef = doc(db, 'repairStatus', controlNumber.value);
        const docSnap = await getDoc(docRef);
        if(docRef.exists){
            setDevice(docSnap.data());
        }else{
            setDevice({device: 'Error', state: 'error'})
        }
    }



    return(
        <div className="checkBackground">
            <div className="mainCheckContainer">
                <div className="checkContainer1">
                    <div className="Form">
                        <TextField id='controlNumber' label='Numero de control'></TextField>
                        <Button onClick={checkStatus} variant='allow' label='Consultar'></Button>
                    </div>
                </div>

                <div className="checkContainer2">
                    <div className="checkedInfo">
                        <h3>Su equipo a reparar es:</h3>
                        <p>{device.device}</p>
                        <h3>Su estado actual es:</h3>
                        <p>{device.state}</p>
                    </div>
                </div>
            </div>
        </div>
    )
}

1 respuesta 1

1

Debes renderizar condicionalmente, si estas seguro que devuelve undefined cuando el documento no existe y que device puede llegar a tener ese valor, haz algo como esto:

export default function App() {
  const [device, setDevice] = useState({
    device: "desconocido",
    state: "desconocido",
  });

  // aqui irian las funciones que cambian el estado de device

  return (
    <div className="App">
      {device ? (
        <div>Datos de device</div>
      ) : (
        <div>
          Aqui iria algun mensaje al usuario de que el documento no existe (device es undefined)
        </div>
      )}
    </div>
  );
}

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.