Estoy usando Firebase como backend y el esquema es el siguiente
const sample_data = { Name: "", Address: "", Contact_no: "", Email: "", img_url: "" } En primer lugar, estoy buscando con una función async como esta
FetchList.js
let dummy = {} async function getItems(){ const response = await fetch('realtime__database__of__firebase__url'); if (!response.ok) { throw new Error("Something went wrong"); } dummy = await response.json(); } getItems(); export default dummy;luego paso los datos recuperados al componente de mi tarjeta de esta manera.
ListHospital.js
import Card from "../UI/Card"; import dummy from "./FetchList"; const ListHospitals = () => { return <Card> {dummy} </Card> } export default ListHospitals; Finalmente, quiero acceder a todos los datos que pasé como accesorios en mi componente CARD , pero cuando hago console.log aquí, la salida no está undefined y cuando hago console.log después de obtener los datos, da una salida adecuada. El problema que tengo es que el componente FetchList se exporta antes de obtener los datos.
Card.js
import classes from "./Card.module.css"; const Card = (props) => { let url = props.children.img; console.log(url); return <div> <img src={props.children.img} alt={props.children.Name}></img> <h1 >{props.children.Name}</h1> <p>{props.children.Address}</p> <h3 >Contact</h3> <p>{props.children.Email}</p> <p>{props.children.Contact_no}</p> </div> } export default Card;FetchList no es un componente de React. Debería realizar la obtención de datos desde un método de ciclo de vida del componente React o useEffect hook cuando el componente se monta ( o según sea necesario bajo demanda ).
Exporte la función getItems :
async function getItems(){ const response = await fetch('realtime__database__of__firebase__url'); if (!response.ok) { throw new Error("Something went wrong"); } return response.json(); } export default getItems; Cargue cuando el componente se monte. Pase los data como apoyo a Card en lugar de como children .
import { useEffect, useState } from 'react'; import Card from "../UI/Card"; import getItems from "./FetchList"; const ListHospitals = () => { const [data, setData] = useState({}); useEffect(() => { getItems() .then(data => setData(data)) .catch(error => { // fetch can return rejected Promise, maybe handle it? }); }, []); return <Card data={data} />; } Tarjeta: acceda a la propiedad data .
const Card = ({ data }) => { const url = data.img; console.log(url); return ( <div> <img src={data.img} alt={data.Name} /> <h1 >{data.Name}</h1> <p>{data.Address}</p> <h3>Contact</h3> <p>{data.Email}</p> <p>{data.Contact_no}</p> </div> ); }