Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

150
Views
¿Cómo puedo acceder a las propiedades del objeto asíncrono y esperar fuera de la función y luego mostrarlo en una tabla html?

desarrollador web para principiantes aquí

Estoy tratando de mostrar los datos de usuario aleatorios relevantes como tales en mi componente de reacción en la siguiente tabla html accediendo a las propiedades del objeto de usuario, sin embargo, no estoy seguro de cómo acceder a ellos fuera de la función asíncrona. Ni siquiera estoy seguro de si debería usar async aquí jaja. ¿Cómo, si en absoluto, podría hacer esto? Incluso intenté crear un insantiador de objetos completamente nuevo, pero no funcionó.

¡¡Gracias!!

 import React, { useState, useEffect } from "react"; const UserTable = () => { const API_URl = "https://randomuser.me/api/"; async function LoadTable() { const response = await fetch(API_URl); const data = await response.json(); const person = data.results; console.log(person); return LoadTable; } LoadTable(); return ( <table> <tr> <th>name</th> <th>age</th> <th>gender</th> </tr> </table> ); }; export default UserTable;
about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

import React, { useState, useEffect } from "react"; const UserTable = () => { const API_URl = "https://randomuser.me/api/"; // declare state const [person, setPerson] = useState(null); // call `LoadTable` inside `useEffect` for safety useEffect(() => { async function LoadTable() { const response = await fetch(API_URl); const data = await response.json(); const person = data.results; // setState setState(person); } LoadTable(); }, []) // do something with `person` down here return ( <table> <tr> <th>name</th> <th>age</th> <th>gender</th> </tr> </table> ); }; export default UserTable;
about 4 years ago · Juan Pablo Isaza Report

0

  1. No llame a LoadTable en render. Llámelo en un controlador de eventos o useEffect .
  2. Almacene el resultado en el estado.
  3. Envuelva sus funciones asincrónicas o funciones que pueden arrojar un error en un bloque de try catch finally final.
  4. Puede almacenar el estado de carga en el estado del componente.
  5. Puede almacenar el error en el estado.
  6. Asegúrate de manejar diferentes escenarios y condiciones de carrera que puedan ocurrir.
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!