Next.js JSON 检索 - JSON 对象问题答案

【问题标题】：Next.js JSON Retrieval - JSON Objects IssueNext.js JSON 检索 - JSON 对象问题
【发布时间】：2021-07-21 23:01:54
【问题描述】：

我正在使用 coingecko API 开发一个简单的加密价格跟踪器。我当前的代码不会从 API 链接访问任何 JSON 对象，并且我没有收到表明问题所在的错误或警告：https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=bitcoin%2C%20ethereum%2C%20ripple&order=market_cap_desc&per_page=100&page=1&sparkline=false

但是，出于测试目的，如果我使用来自 jsonplaceholder 的这个 API 链接，它绝对可以正常工作：https://jsonplaceholder.typicode.com/users

这是我的代码：

export const getStaticPaths = async () => {

//Does not work with this json url
// const res = await fetch('https://jsonplaceholder.typicode.com/users')

const res = await fetch('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=bitcoin%2C%20ethereum%2C%20ripple&order=market_cap_desc&per_page=100&page=1&sparkline=false')
const data = await res.json();
const paths = data.map(coin => {
return {
  params: {id: coin.id}
}
})

return {
    paths,
    fallback: false
    }
}

export const getStaticProps = async (context) => {
const id = context.params.id; 

//Does not work with this json url
// const res = await fetch('https://jsonplaceholder.typicode.com/users/' + id )

const res = await fetch('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=' + id + '%2C%20&order=market_cap_desc&per_page=100&page=1&sparkline=false/')

const data = await res.json();
console.log(data)

return {
    props: {coin: data}
  }
}

const Details = ({ coin }) => {
return(
   
     <div>
      <h1>Coin Page</h1>
      <h2>{ coin.name }</h2>
      <h2>{ coin.symbol }</h2>
    </div>
   )
}

export default Details;

正如我所说，我没有收到任何错误或警告，所以任何有关故障排除的帮助将不胜感激，谢谢

【问题讨论】：

标签： json reactjs typescript next.js coingecko

【解决方案1】：

我在你的代码中发现了一些问题，你可以看看这个版本很好。

这是我用来重现您的情况的代码沙箱： https://codesandbox.io/s/amazing-star-55pyl?file=/pages/coins/%5Bid%5D.js:0-1221

例如，您必须访问 url /bitcoin 才能使其工作。

首先，我从 url 中删除了“%2C%20”，因为它代表空格和逗号，当您有货币列表但在这种情况下不是这样时，这很有用。

最后在你的组件中，你会得到一个硬币数组，你应该引用第一个（只有一个项目）。

export const getStaticPaths = async () => {
  //Does not work with this json url
  // const res = await fetch('https://jsonplaceholder.typicode.com/users')

  const res = await fetch(
    "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=bitcoin%2C%20ethereum%2C%20ripple&order=market_cap_desc&per_page=100&page=1&sparkline=false"
  );

  const data = await res.json();
  const paths = data.map((coin) => {
    return {
      params: { id: coin.id.toString() }
    };
  });

  return {
    paths,
    fallback: false
  };
};

export const getStaticProps = async (context) => {
  const id = context.params.id;

  //Does not work with this json url
  // const res = await fetch('https://jsonplaceholder.typicode.com/users/' + id )

  const res = await fetch(
    "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=" +
      id +
      "&order=market_cap_desc&per_page=100&page=1&sparkline=false"
  );

  const data = await res.json();

  return {
    props: { coin: data }
  };
};

const Details = ({ coin }) => {
  console.log(coin);

  return (
    <div>
      <h1>Coin Page</h1>
      <h2>{coin[0].name}</h2>
      <h2>{coin[0].symbol}</h2>
    </div>
  );
};

export default Details;

【讨论】：