Map 通過對象數組 NextJs

Question

我正在 NextJS 中構建一個應用程序，我必須在其中獲取 coinmarketcap api 以顯示前 10 種加密貨幣的名稱和價格。 我在 api 文件夾中創建了另一個文件，其中包含名為coin-market-cap-api.ts 。 我可以看到數據顯示為 object 那么我怎樣才能通過它 map 並取出加密貨幣名稱和價格？ 我嘗試使用 state 但它顯示錯誤，我也嘗試了道具但我無法顯示任何東西。 當我嘗試使用 500（內部服務器錯誤）訪問 map 時，我也會收到錯誤消息。 我認為問題在於我傳遞數據的方式，但我不確定HomePageHeader.tsx的錯誤在哪里

import Image from 'next/image';
import { navLinks } from './data';
import { LatestCrypto } from './latestCrypto';
import { Col, Row } from 'antd';
import React, { useEffect, useState } from 'react';

export const HomePageHeader = () => {
  const [crypto, setSelectedCrypto] = React.useState();

  fetch('/api/coin-market-cap-api')
  .then((res)=>res.json())
  .then((data)=>{
    console.log("printed data", data);
     setSelectedCrypto(data)  
  })
  .catch((err)=>{
    console.log(err)
  })
console.log("stats", setSelectedCrypto)
  return (
    <Row>
      <Col md={24} sm={24} xs={24} className='homepage-header'>
        <div id='logo'>
          <Image src='/Logo_neon.png' alt='logo' className='logo-img' width={150} height={50} />
        </div>
        <div className='ticker-tape-section'>
          <div className='ticker-tape-section__container'>
            <div className='ticker-tape__text-block'>
              {navLinks.map((link, index) => {
                return (
                  <div className='cont' key={index}>
                    <span className='ticker-tape--text'>{link.name}</span>
                    <span className='ticker-tape--text'>{link.price}</span>
                  </div>
                );
              })}
            </div>
            <div className='ticker-tape__text-block'>
              {crypto.map((link, index) => {
                return (
                  <div className='cont' key={index}>
                    <span className='ticker-tape--text'>{link.name}</span>
                    <span className='ticker-tape--text'>{link.price}</span>
                  </div>
                );
              })}
            </div> 

          </div>
        </div>
      </Col>
    </Row>
  );
};

硬幣市值 api.ts

import axios from 'axios';
import { NextApiRequest, NextApiResponse } from 'next';
const API_PRIVATE_KEY = process.env.NEXT_PRIVATE_CRYPRO_MARKET_KEY;

export default async function getTop10Coin(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'GET') {
    const response = await axios.get(
      'https://pro-api.coinmarketcap.com/v1/cryptocurrency/listings/latest?start=1&limit=10&convert=USD',
      {
        headers: {
          'X-CMC_PRO_API_KEY': `${API_PRIVATE_KEY}`,
        },
      }
    );
    return res.json(response.data.data);
  }
  return res.json({ message: 'Somethin went wrong' });
}

output

Array(10)
0: {id: 1, name: 'Bitcoin', symbol: 'BTC', slug: 'bitcoin', num_market_pairs: 9713, …}
1: {id: 1027, name: 'Ethereum', symbol: 'ETH', slug: 'ethereum', num_market_pairs: 6066, …}
2: {id: 825, name: 'Tether', symbol: 'USDT', slug: 'tether', num_market_pairs: 39089, …}
3: {id: 3408, name: 'USD Coin', symbol: 'USDC', slug: 'usd-coin', num_market_pairs: 6051, …}
4: {id: 1839, name: 'BNB', symbol: 'BNB', slug: 'bnb', num_market_pairs: 1091, …}
5: {id: 4687, name: 'Binance USD', symbol: 'BUSD', slug: 'binance-usd', num_market_pairs: 4945, …}
6: {id: 52, name: 'XRP', symbol: 'XRP', slug: 'xrp', num_market_pairs: 809, …}
7: {id: 2010, name: 'Cardano', symbol: 'ADA', slug: 'cardano', num_market_pairs: 564, …}
8: {id: 5426, name: 'Solana', symbol: 'SOL', slug: 'solana', num_market_pairs: 372, …}
9: {id: 74, name: 'Dogecoin', symbol: 'DOGE', slug: 'dogecoin', num_market_pairs: 556, …}
length: 10

非常感謝大家

Answer 1

也許這可以幫助你

 Object.keys(object).map(item => item);

我認為如果您在這里打印 JSON 返回會很有幫助：D