Soy nuevo usando reactjs. En el primer caso, quiero obtener datos json de fetch url, pero ese json necesita async await para mostrar todos los datos. Logré resolver ese problema, pero ahora quiero agregar datos de json para reaccionar al renderizado de retorno. y luego recibo un error como este Error no detectado: los objetos no son válidos como un niño React (encontrado: [objeto Promesa]). Si tenía la intención de representar una colección de niños, use una matriz en su lugar. . este es mi codigo
async function URL(url, id){ return fetch(url+"/"+id) .then((response) => response.json()) .then((responseJson) => { const myArrayresponse = responseJson.image.split("/"); return "https://myurl.com/"+myArrayresponse[2]+"/"+myArrayresponse[3]; }) .catch((error) => { return "images/icon.png"; }); } const posts = datas[0].map((mydata, i) => URL(mydata.uri, mydata.id).then(img => { return `<a href={"https://myurl.com/"+CONFIG.ADDRESS+"?a="+mydata.id} target="_blank" className="mybtn"><div className="title">{mydata.name} ({mydata.symbol} - {mydata.id})</div><img src={img} /></a>`; }) ); return ( <ResponsiveWrapper flex={1} style={{ padding: 24 }} test> <s.Container flex={1} jc={"center"} ai={"center"}> {posts} </s.Container> </ResponsiveWrapper> ) const post es [objeto Promesa], ¿cómo agregar const post para reaccionar al renderizado sin [objeto Promesa]?
Obtiene [object Promise] porque en realidad está devolviendo una matriz de promesa.
Entonces, para que funcione, puede usar Promise.all , que toma una iteración de promesas como entrada y devuelve una única promesa que se resuelve en una matriz de los resultados de las promesas de entrada. Consulte aquí: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
Puedes hacerlo de esta manera:
const [posts,setPosts]= useState([]) async function URL(url, id){ return fetch(url+"/"+id) .then((response) => response.json()) .then((responseJson) => { const myArrayresponse = responseJson.image.split("/"); return "https://myurl.com/"+myArrayresponse[2]+"/"+myArrayresponse[3]; }) .catch((error) => { return "images/icon.png"; }); } useEffect(()=>{ async function getPosts(){ const result = await Promise.all(datas[0].map((mydata, i) => URL(mydata.uri, mydata.id).then(img => { return `<a href={"https://myurl.com/"+CONFIG.ADDRESS+"?a="+mydata.id} target="_blank" className="mybtn"><div className="title">{mydata.name} ({mydata.symbol} - {mydata.id})</div><img src={img} /></a>`; }) )); setPosts(result) }; getPosts() },[]) return ( <ResponsiveWrapper flex={1} style={{ padding: 24 }} test> <s.Container flex={1} jc={"center"} ai={"center"}> {posts} </s.Container> </ResponsiveWrapper> )