Estoy tratando de renderizar este componente
import styled from "styled-components" import React from 'react' import axios from "axios" import { useState } from "react" const Wrapper = styled.div` display: flex; background-color: gray; width: 100%; height: 50px; border-color: white; font-size: 10px; border-style:dashed; color: black; ` const CollectionImage = styled.img` position: relative; top: 7px; width: 30px; height: 30px; border-radius: 50%; ` export default async function Collections({imgSrc,name,Price,symbol}) { const res = await axios.get(`https://api-mainnet.magiceden.dev/v2/collections/${symbol}/stats`) return ( <Wrapper key={symbol}> <h3>Rank</h3> <CollectionImage src={imgSrc} /> <h3>{name}</h3> </Wrapper> ) }Archivo en el que trato de renderizar el componente:
const [Data,setData] = useState([]) const [solPrice,setsolPrice] = useState([]) useEffect(async()=>{ const res = await axios.get(('https://api-mainnet.magiceden.dev/v2/collections?offset=0&limit=50')) setData(res.data) axios.get("https://api.binance.com/api/v3/ticker/24hr?symbol=SOLUSDC" ).then((res)=>setsolPrice(Math.round(res.data.lastPrice * 100)/100)).catch((err)=> console.log(err)) }) return ( <Wrapper> <Statbox>Sol/USD<br/>${solPrice}</Statbox> <CollectionStats> <h3>#</h3> <h3>name</h3> <h3>Floor Price</h3> <h3>Avg Price</h3> <h3>% Listed</h3> </CollectionStats> <CollectionsBox> { Data.map((collection)=> { const symbol = collection.symbol const name = collection.name const imgSrc = collection.image return ( <Collections symbol={symbol} name={name} /> ) }) } </CollectionsBox> </Wrapper> ) } export default HomerEstoy tratando de representar el componente en un mapeo pero obtengo el error: 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, si creo manualmente el componente en el archivo principal (el archivo a continuación) y no hay error, pero quiero mantenerlo en archivos separados y causa el error.
Su componente Collections no debe ser una función asíncrona. Además, si desea obtener datos cuando se procesa un componente, debe usar un gancho useEffect. Su componente sería algo como esto:
export default function Collections({imgSrc,name,Price,symbol}) { const [result, setResult] = useState(); // Here we are making an async call as soon as the component renders useEffect(() => { const asyncCall = async () => { const res = await axios.get(`https://api-mainnet.magiceden.dev/v2/collections/${symbol}/stats`) setResult(res); } asyncCall(); }, []); // Here you can use "result" as you want, just remember that it's value is null until the request finishes. return ( <Wrapper key={symbol}> <h3>Rank</h3> <CollectionImage src={imgSrc} /> <h3>{name}</h3> </Wrapper> ) }