import useState from "react-usestateref"; const [meta, setMeta, metaRef] = useState({});

JSX del componente interior:

 data.result.map((token) => { const id = token.token_id; const params = { uri: token.token_uri }; if (token.metadata) { setMeta(JSON.parse(token.metadata)); } else { Moralis.Cloud.run("get_token_uri", params).then( (response) => setMeta(response) ); } const { name, description, imageUrl } = metaRef.current; return ( <Card key={id} tokenId={id} name={name} description={description} user_address={user_address} imageUrl={fixURL(imageUrl)} calledFrom={calledFrom} /> ); })

Quiero actualizar la variable de metaestado desde dentro de data.result.map y usar el metaobjeto actualizado para devolver un componente de Tarjeta. Estoy usando react-usestateref para obtener el valor actual de la variable de metaestado. De lo contrario, el meta sigue siendo {} cuando se desestructura, incluso después de actualizarse. Si token.metadata no es nulo, quiero establecer la var de metaestado en token.metadata obj y, si es nula, quiero realizar una solicitud asíncrona para recuperar el objeto de Moralis y luego establecerla en la var de metaestado. Este código genera el siguiente error: Error no detectado: demasiados renderizados. React limita el número de renderizaciones para evitar un bucle infinito.

¿Cómo puedo hacer que este código funcione según lo previsto?