Bueno, debe obtener la estructura correcta de la carga útil devuelta de la API. No tiene una propiedad de accounts .

La carga útil se ve así:

 { "success":true, "data":[{"account":"joejerde","assets":"11933"},{"account":"protonpunks","assets":"9072"}], "queryTime": 1646267075822 }

Entonces puede cambiar el nombre de la propiedad data mientras se desestructura. const { data: accountList } = await res.json();

 function UserAccounts() { const [accounts, setAccounts] = useState(); useEffect(() => { async function fetchAccounts() { const res = await fetch( 'https://proton.api.atomicassets.io/atomicassets/v1/accounts' ); const { data: accountList } = await res.json(); setAccounts(accountList); // logging both the state and the fetched value console.log(accounts, accountList); // accounts (state) will be undefined // if the fetch was successful, accountList will be an array of accounts (as per the API payload) } fetchAccounts() }, []) return <div> {JSON.stringify(accounts)} </div> }

Editar: usar algún otro nombre de variable durante la desestructuración, confuso usar el mismo nombre de variable que el estado ( accounts ).

códigos de trabajoandbox

Una cosa que cambiaría es trabajar con las declaraciones try/catch que rodean async/await. Si su declaración de espera falla, nunca llegará a la declaración de console.log. A menos que tenga otro componente que maneje esos errores, lo usaría de esa manera.

Esa es mi sugerencia:

 function UserAccounts() { const [accounts, setAccounts] = useState(); useEffect(() => { try { async function fetchAccounts() { const res = await fetch( 'https://proton.api.atomicassets.io/atomicassets/v1/accounts' ); const { accounts } = await res.json(); setAccounts(accounts); console.log(accounts); } } catch (err) { console.log(err) // do something like throw your error } fetchAccounts(); }, []); }

ya que la función de estado se ejecuta de forma asíncrona. por lo tanto, cuando usa setAccounts , establece la variable de accounts de manera asíncrona, por lo que hay una forma preferida de hacer esto como se muestra a continuación

problemas que he visto

1. El resultado de búsqueda debe desestructurarse con datos en lugar de variables de cuentas

2. La función setAccounts se está ejecutando de forma asíncrona, por lo que no imprimirá el resultado inmediatamente en la siguiente línea

 import { useEffect, useState } from "react"; export default function App() { const [accounts, setAccounts] = useState(); async function fetchAccounts() { const res = await fetch( "https://proton.api.atomicassets.io/atomicassets/v1/accounts" ); const { data } = await res.json(); setAccounts(data); } // on component mount / onload useState(() => { fetchAccounts(); }, []); // on accounts state change useEffect(() => { console.log(accounts); }, [accounts]); return <div className="blankElement">hello world</div>; }

ver aquí muestra