0
159
Visualizaçõesmap no es una función no puede obtener datos de api
Tengo un problema al obtener datos de API, cuando mapeo a través de mi matriz de datos, recibo un mensaje de error que indica que el mapa no funciona. Obtuve los datos en la página de índice y luego los pasé como accesorios a los componentes de la lista de monedas. No puedo detectar mi error aquí. He puesto los componentes relevantes a continuación. Gracias por su tiempo de antemano. León
Lista de monedas
import Coins from './Coins'; export default function CoinList({filteredCoins}) { return ( console.log(filteredCoins), filteredCoins.map(coin => { return ( <Coins key={coin.id} name={coin.name} id={coin.id} price={coin.current_price} symbol={coin.symbol} marketcap={coin.total_volume} volume={coin.market_cap} image={coin.image} priceChange={coin.price_change_percentage_24h} /> ); })) )}índice.js
import Head from 'next/head' import Image from 'next/image' import styles from '../styles/Home.module.scss' import Header from '../components/Header'; import CoinList from '../components/CoinList'; export default function Home({filteredCoins}) { return ( <div className={styles.container}> <Head> <title>Create Next App</title> <meta name="description" content="Generated by create next app" /> <link rel="icon" href="/favicon.ico" /> </Head> <Header /> <main className={styles.main}> <CoinList filteredCoins={filteredCoins}/> </main> <footer className={styles.footer}> <a href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app" target="_blank" rel="noopener noreferrer" > Powered by{' '} <span className={styles.logo}> <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} /> </span> </a> </footer> </div> ) } export const getServerSideProps = async () => { const res = await fetch( `https://api.coingecko.com/api/v3/coins/ markets?vs_currency=usd&order=market_cap_ desc&per_page=50&page=1&sparkline=false`); const filteredCoins = await res.json(); return { props: { filteredCoins } }; };monedas
function Coins ({name}) { return ( <h1>{name}</h1> ); } export default Coins;1 Respostas
Responde à pergunta0
su solución es props.filteredCoins.filteredCoins.map(coin => { puede probar esto, directamente no intente envolverlo alrededor del objeto,
return { props: { filteredCoins } }; o utilícelo como si lo envolviera dentro de props de filteredCoins of filteredCoins ,
//console.log(filteredCoins), //props.filteredCoins.filteredCoins.map(coin => { por lo que a continuación se muestra un enfoque simple que evita envolver la matriz en el objeto {} ,
export const getServerSideProps = async () => { const res = await fetch( `https://api.coingecko.com/api/v3/coins/ markets?vs_currency=usd&order=market_cap_ desc&per_page=50&page=1&sparkline=false`); const filteredCoins = await res.json(); return filteredCoins; }; esto es lo que has hecho, 