map 不是函數無法從 api 獲取數據

Question

我在從 api 獲取數據時遇到問題，當映射到我的數據數組時，我收到錯誤消息，指出映射不起作用。 我已經獲取了索引頁面上的數據，然后將其作為道具傳遞給 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}
          />
        );
      }))
  )}

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

硬幣


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

export default Coins;

Answer 1

你的修復是props.filteredCoins.filteredCoins.map(coin => {你能試試這個嗎，直接不要試圖把它包裹在對象周圍，

  return {
    props: {
      filteredCoins
    }
  };

要不這樣使用它，因為你把它包內props的filteredCoins的filteredCoins ，

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

所以下面是避免將數組包裝到{}對象中的簡單方法，

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

這就是你所做的，

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