map 不是函数无法从 api 获取数据

Question

I have an issue fetching data from api, when map through my array of data i am getting error message that map is not function.我在从 api 获取数据时遇到问题，当映射到我的数据数组时，我收到错误消息，指出映射不起作用。 I have fetched the data on the index page then passed it as props to the coinlist components.我已经获取了索引页面上的数据，然后将其作为道具传递给 coinlist 组件。 I cannot spot my error here.I have put the relevant components below.我在这里找不到我的错误。我把相关的组件放在下面。 Thank for your time in advance.提前感谢您的时间。 Leo狮子座

Coinlist硬币列表

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}
          />
        );
      }))
  )}

index.js索引.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
    }
  };
};

Coins硬币


function Coins ({name}) {
    return (
        <h1>{name}</h1>
    );
}

export default Coins;

Answer 1

your fix is props.filteredCoins.filteredCoins.map(coin => { can you try this, directly don't try to wrap it around the object,你的修复是props.filteredCoins.filteredCoins.map(coin => {你能试试这个吗，直接不要试图把它包裹在对象周围，

  return {
    props: {
      filteredCoins
    }
  };

or else use it like, as you wrapped it inside props of filteredCoins of filteredCoins ,要不这样使用它，因为你把它包内props的filteredCoins的filteredCoins ，

  //console.log(filteredCoins),
  //props.filteredCoins.filteredCoins.map(coin => {

so below is simple approach avoids wrapping of array into {} object,所以下面是避免将数组包装到{}对象中的简单方法，

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;
};

this is what you have done,这就是你所做的，

map 不是函数无法从 api 获取数据

问题描述

1 个解决方案

解决方案1
0 2021-11-10 08:51:38

map 不是函数无法从 api 获取数据

问题描述

1 个解决方案

解决方案1 0 2021-11-10 08:51:38

解决方案1
0 2021-11-10 08:51:38