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 回答