function UserTransactionsComponent1() { const [accounts, setAccounts] = useState(); useEffect(() => { async function fetchData() { const res = await fetch( 'https://proton.api.atomicassets.io/atomicassets/v1/accounts' ); const { data } = await res.json(); setAccounts(data); } fetchData(); }, []); accounts.map((result) => { const { account } = result; }); return <PageLayout>Hi! {account}</PageLayout>; } export default UserTransactionsComponent1;Yo console.log(accounts) justo antes de mapearlo y todas las propiedades están ahí. El problema es que la cuenta en acounts.map se muestra atenuada en VSCode. No se recoge a la vuelta . Esto hace que reciba el siguiente error: TypeError: Cannot read properties of undefined (reading 'map') . ¿Cuál es la razón de esto?
La declaración de devolución está fuera del alcance de la variable (cuenta).
function UserTransactionsComponent1() { const [accounts, setAccounts] = useState(); useEffect(() => { async function fetchData() { const res = await fetch( "https://proton.api.atomicassets.io/atomicassets/v1/accounts" ); const { data } = await res.json(); setAccounts(data); } fetchData(); }, []); const getAccounts = () => { if (accounts) return accounts?.map((result) => { const { account } = result; return account; }) } return ( <PageLayout> Hi!{" "} {getAccounts()} </PageLayout> ); } export default UserTransactionsComponent1;El problema es que su función de mapa se está ejecutando antes de que se haya completado su recuperación, por lo que las cuentas aún no están definidas cuando intenta mapear.
Hay algunas maneras de resolver esto. Una opción es simplemente usar .then(). Así que ponga su función de mapa dentro de .then, dentro de su useEffect.
.then(() => accounts.map( // insert rest of function here ))Esto le dice al código que ejecute la función de mapa solo después de que se complete la búsqueda
Las accounts no se definen hasta que se completa la recuperación, por lo que debe asignarlo en un efecto, que espera a que se establezca el estado de las accounts :
useEffect(() => { accounts.map(...); }, [accounts]); Además de eso, cuando regrese, la account no estará undefined . Puede crear una pantalla de carga o algo así mientras se obtienen los datos, luego volver a renderizar con los datos:
return ( <PageLayout>{accounts ? accounts : "Loading..."}</PageLayout> );No estoy seguro de lo que está tratando de hacer en su función de mapa; no está especificando específicamente qué cuenta de la matriz desea; necesitarás otro estado.