如何解决Next.js JSON 检索 - JSON 对象问题
我正在使用 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;
正如我所说,我没有收到任何错误或警告,因此我们将不胜感激,谢谢
解决方法
我在你的代码中发现了一些问题,你可以看看这个版本是否工作正常。
这是我用来重现您的情况的代码沙箱: https://codesandbox.io/s/amazing-star-55pyl?file=/pages/coins/%5Bid%5D.js:0-1221
例如,您必须访问网址 /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;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。