userData es una función que recibe datos de usuario de una API usando getUserByChainAccount . getUserByChainAccount requiere un nombre de usuario, que en este caso se recupera dinámicamente del comprador .
Estoy interesado en avatar , pero sigo recibiendo el siguiente error Error de tiempo de ejecución no controlado Error de referencia: el avatar no está definido
function UserTransactionsComponent() { const [sales, setSales] = useState(); useEffect(() => { async function fetchData() { const res = await fetch( 'https://proton.api.atomicassets.io/atomicmarket/v1/sales' ); const { data } = await res.json(); setSales(data); } fetchData(); }, []); if (!sales) { return ( <div> <Spinner /> </div> ); } return ( <PageLayout> <ul> {sales.map((result) => { const { sale_id, buyer, seller, listing_price, listing_symbol, created_at_time, } = result; const userData = async (buyer) => { const user = await proton.getUserByChainAccount(buyer); const { name, avatar } = user; }; function HandleBuyerClick() { window.location = '/user/' + buyer; } function HandleSellerClick() { window.location = '/user/' + seller; } if (buyer !== null) { return ( <Card> <li key={sale_id}> <h3> <Transaction> {avatar} <Button onClick={HandleSellerClick}>{seller}</Button> </Transaction>{' '} just sold item number <Transaction> <Button>{sale_id}</Button> </Transaction>{' '} to{' '} <Transaction> <Button onClick={HandleBuyerClick}>{buyer}</Button> </Transaction>{' '} for <Transaction>{formatNumber(listing_price)}</Transaction>{' '} {listing_symbol} at {parseTimestampJM(created_at_time)} </h3> </li> </Card> ); } })} </ul> </PageLayout> ); } export default UserTransactionsComponent;Hacer una solicitud de API durante el renderizado es una mala idea. React puede volver a renderizar por una variedad de razones, como que este componente o cualquier componente principal actualice su estado. Sería una tontería volver a solicitar los mismos resultados de la API una y otra vez en cada renderizado. Sin mencionar que tratar de calzar operaciones asincrónicas en una operación de renderizado será difícil y lleno de errores.
Este tipo de solicitudes deben realizarse cuando se carga el componente y los resultados deben almacenarse en el estado.
En este caso, su mejor apuesta probablemente sea hacer un componente completamente separado para representar dentro de la operación .map() , y pasarle a ese componente lo que necesita para hacer la solicitud de API. Por ejemplo, considere un .map() como este:
{sales.map((result) => { return <SomeOtherComponent result={result} /> })} Luego, dentro de ese componente, manejaría su llamada API y administraría el estado del resultado de esa llamada. Por ejemplo, dentro de SomeOtherComponent podría hacer esto:
const { sale_id, buyer, seller, listing_price, listing_symbol, created_at_time, } = props.result; const [avatar, setAvatar] = useState(''); // <-- define the state here useEffect(() => { const userData = async (buyer) => { const user = await proton.getUserByChainAccount(buyer); const { name, avatar } = user; setAvatar(avatar); // <--- update the state here }; userData(); }, []); // define your click handlers as you already do here // return your JSX markup as you already do here