0

我正在使用 coingecko API 开发一个简单的加密价格跟踪器。我当前的代码不会从 API 链接访问任何 JSON 对象，并且我没有收到表明问题所在的错误或警告：https ://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=比特币%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;

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

4

1 回答 1

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;

Captura CodeSandBox

于 2021-04-28T15:51:31.827 回答