Entonces, estoy extrayendo datos de mi base de datos usando una API con este código:
let { id } = useParams(); const [Tenant, setTenant] = useState(""); useEffect(() => { axios.get(`http://localhost:3001/tenants/byId/${id}`).then((response) => { setTenant(response.data); }); }, []);Luego trato de establecer un valor predeterminado en mi campo de texto Material UI usando:
<TextField required id="Field1" defaultValue={Tenant.tenantName} label="Tenant Name" variant="outlined" onChange={(event) => {setNtenantName(event.target.value)}} /> Pero, no estaba recibiendo nada. Así que decidí console.log(Tenant.tenantName) y obtuve esto en mi consola:
Tu estado no está listo cuando intentas acceder a él.
Así que puedes comprobarlo.
{Tenant && ( <TextField required id="Field1" defaultValue={Tenant.tenantName} label="Tenant Name" variant="outlined" onChange={(event) => {setNtenantName(event.target.value)}} /> )}también en una nota al margen, no es común escribir en mayúscula los nombres de su estado.
puede cambiarlo a: const [tenant, setTenant] = useState(""); solo por convención
Lo que Kevin propone debería funcionar bien, pero también puede hacer algo así, que podría ser más fácil de leer y mostrará un cargador mientras obtiene los datos.
if(Tenant === undefined) return <div>Loading data....</div> else return ( <TextField required id="Field1" defaultValue={Tenant.tenantName} label="Tenant Name" variant="outlined" onChange={(event) => {setNtenantName(event.target.value)}} /> )