首页 > 解决方案 > 从 Coindesk API 获取 [Object] 而不是 JavaScript 对象

问题描述

我正在使用 Nextjs 并从 Coindesk 的 API 获取比特币的当前价格:

https://api.coindesk.com/v1/bpi/currentprice.json

我获取了组件中的数据,Home在这个组件中,我得到了正确的 json 数据。我将此数据Prices作为道具发送到组件,但在此组件中未正确记录。有什么问题axios吗?


而不是这个:bpi: { USD: {...}, GBP: {...}, EUR: {...} }

我得到这个:bpi: { USD: [Object], GBP: [Object], EUR: [Object] }


主页.js

import Layout from "../components/Layout"
import Prices from "../components/Prices"
import axios from "axios"

const Home = (props) => {
  return (
    <Layout>
      <div>
        <h1>Welcome to Bitzprice</h1>
        <Prices bpiData={props.bpiData} />
      </div>
    </Layout>
  )
}

Home.getInitialProps = async function () {
  const res = await axios.get(
    "https://api.coindesk.com/v1/bpi/currentprice.json"
  ) 
  const data = res.data
  console.log("DATA=>", data)
  return {
    bpiData: data,
  }
}

export default Home

价格.js

class Prices extends React.Component {
  state = {
    currency: "USD",
  }

  render() {
    console.log("PROPS=>", this.props)
    return (
      <div>
        ....
      </div>
    )
  }
}

export default Prices



DATA=> {
    time: {
      updated: 'Jul 26, 2020 10:29:00 UTC',
      updatedISO: '2020-07-26T10:29:00+00:00',
      updateduk: 'Jul 26, 2020 at 11:29 BST'
    },
    disclaimer: 'This data was produced from the CoinDesk Bitcoin Price Index (USD). Non-USD currency data converted using hourly conversion rate from openexchangerates.org',
    chartName: 'Bitcoin',
    bpi: {
      USD: {
        code: 'USD',
        symbol: '&#36;',
        rate: '9,983.2870',
        description: 'United States Dollar',
        rate_float: 9983.287
      },
      GBP: {
        code: 'GBP',
        symbol: '&pound;',
        rate: '7,804.6243',
        description: 'British Pound Sterling',
        rate_float: 7804.6243
      },
      EUR: {
        code: 'EUR',
        symbol: '&euro;',
        rate: '8,564.9015',
        description: 'Euro',
        rate_float: 8564.9015
      }
    }
  }

PROPS=> {
  bpiData: {
    time: {
      updated: 'Jul 26, 2020 10:29:00 UTC',
      updatedISO: '2020-07-26T10:29:00+00:00',
      updateduk: 'Jul 26, 2020 at 11:29 BST'
    },
    disclaimer: 'This data was produced from the CoinDesk Bitcoin Price Index (USD). Non-USD currency data converted using hourly conversion rate from openexchangerates.org',
    chartName: 'Bitcoin',
    bpi: { USD: [Object], GBP: [Object], EUR: [Object] }
  }
}

标签: javascriptjsonreactjsapifetch

解决方案


数据可能是正确的,[对象]只是避免显示复杂嵌套对象的快捷方式。如果你这样做console.log("DATA=>", JSON.stringify(data)),你将拥有完整的数据。


推荐阅读