Question

如何在 next js 中获取并渲染对象的对象？

2022-07-06

3158

javascript reactjs react-hooks next.js

我有以下代码，我正在尝试显示对象对象的数据。我收到的错误是 TypeError：无法读取未定义的属性。我知道数据不是“对象数组”的格式，但我仍然不知道如何正确映射它。我希望得到一些帮助......

import Layout, { siteTitle } from '../components/layout';
import { useState, useEffect } from 'react'

export default function Home({ allPosts }) {  
  return (
    <Layout home>
      <Head>
        <title>{siteTitle}</title>
      </Head>
      <section>
        {Object.values(allPosts.bpi).map(({ section, idx }) => (
          <li className={utilStyles.listItem} key={idx}>
           {section.description}
          <br />
          {section.code}
          <br />
        </li>
        ))}
      </section>
    </Layout>
  );
}

export async function getStaticProps() {
  let data = [];
  let error = "";
  try {
    const res = await fetch(
      "https://api.coindesk.com/v1/bpi/currentprice.json",
    );
    data = await res.json();
  } catch (e) {
    error = e.toString();
  }

  return {
    props: {
      allPosts: data,
      error,
    },
  };
}

记录的数据：在此处输入图像描述

对象看起来像这样

{
"chartName": "Bitcoin",
"bpi": {
      "USD": {
           "code": "USD",
           "symbol": "&#36;",
           "rate": "20,220.5728",
           "description": "United States Dollar",
           "rate_float": 20220.5728
      },
     "GBP": {
           "code": "GBP",
           "symbol": "&pound;",
           "rate": "16,896.1488",
           "description": "British Pound Sterling",
           "rate_float": 16896.1488
      },
   }
}

Answer 1

您无法访问 USD 和 GBP 对象。您只是获取它们的名称。但您可以像这样通过名称访问它们：

<section>
    {Object.values(allPosts.bpi).map((section, idx) => (
        <li className={utilStyles.listItem} key={idx}>
           {allPosts.bpi[section].description}
            <br />
            {allPosts.bpi[section].code}
            <br />
        </li>
    ))}
</section>

编辑

它应该是 section.description ，而不是 allPosts.bpi[section].description 。对象代码也一样。

<section>
    {Object.values(allPosts.bpi).map((section, idx) => (
        <li className={utilStyles.listItem} key={idx}>
           {section.description}
            <br />
            {section.code}
            <br />
        </li>
    ))}
</section>

Answer 2

您错误地使用了 map 方法。尝试一下。

Object.values(allPosts.bpi).map((section, idx) => ....

silverprize

2022-07-06