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

Question

我正在使用 coingecko API 开发一个简单的加密货币价格跟踪器。我当前的代码不会访问 API link 中的任何 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 link，它绝对可以正常工作：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;

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

Answer 1

我在你的代码中发现了一些问题，你可以检查一下这个运行正常的版本。

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

你必须访问 url /bitcoin 例如它才能工作。

首先，我从 url 中删除了“%2C%20”，因为它代表 space 和一个逗号，当你有一个货币列表时，这很有用，但在这个列表中没有案例.

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

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;

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

Next.js JSON Retrieval - JSON Objects Issue

json

reactjs

typescript

next.js

coingecko