así que estoy haciendo un proyecto escolar en el que intento obtener datos de mi almacenamiento de blobs de Azure y luego mostrarlos en un sitio web que se está creando en ReactJS. Me las arreglé para obtener las imágenes de mi almacenamiento y se muestran bien, pero cuando trato de mostrar el "prop creado en" no se muestra nada.
Solo quiero agregar que soy bastante nuevo en javascript, por lo que mi código puede parecer basura.
La función BodyPresenter es la que se conecta a mi almacenamiento de blobs y luego recupera los datos. Funciona sin problemas para "blobImages" pero no funcionará para "blobDateTime"
function BodyPresenter() { const [blobImages, setBlobImages] = useState([]); const [blobDateTime, setBlobDateTime] = useState([]); const account = "ktodb"; const containerName = "images"; useEffect(() => { async function blobStorage() { const blobServiceClient = new BlobServiceClient(api_client.get_blob_account(account)); const containerClient = blobServiceClient.getContainerClient(containerName); let blobs = containerClient.listBlobsFlat(); let newArrayForImages = []; let newArrayforDates = []; for await (const blob of blobs) { // console.log(`${blob.name}`); //`Blob ${i++}: newArrayForImages.push(blob.name); newArrayforDates.push(blob.properties.createdOn) } setBlobImages(newArrayForImages); setBlobDateTime(newArrayforDates); } return blobStorage; }, [blobImages]) console.log(blobDateTime)Como puede ver, yo console.log() el blobDateTime en la parte inferior y me da los datos que quiero en la consola, también conocidos como los datos de creación de todas mis imágenes: imagen de la consola
Luego trato de representar los datos en un archivo de vista y supongo que el problema radica aquí, pero estoy seguro de cuál es el problema y cómo solucionarlo, para recordarles que soy nuevo en javascript. Las imágenes se están procesando pero no el DateTime
function BodyView( {blobImages, blobDateTime} ) { console.log(blobDateTime) return ( <div> {blobImages.map( (blobImages, blobDateTime) => ( <div> <div className="images"> <img key={blobImages.id} src={api_client.get_image_url(blobImages)} alt="" /> </div> <div>{blobDateTime}</div> </div> ))} </div> )}
Use componentDidMount para cargar datos y luego guárdelos en el estado.
Código de muestra,
componentDidMount() { // Runs after the first render() lifecycle } render() { return ( <div>{YourDateTime}</div> ); }Algunos de los enlaces útiles aquí,