在Coingecko上获取王子时出现问题(反应)

Question

我正试图使用Congecko API来更好地使用React，但我已经陷入了ahah

目前，通用应用程序非常简单，索引显示所有代币的卡片，并带有股票代码和价格。每张卡片都可以点击进入更详细的页面。

App.js

import axios from "axios";
import React, { useEffect, useState } from "react";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import SingleCoin from "./pages/SingleCoin";
function App() {
const [coinsData, setCoinsData] = useState([]);
useEffect(() => {
axios
.get(
"https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=250&page=1&sparkline=false&price_change_percentage=1h%2C24h%2C7d%2C14d%2C30d%2C200d%2C1y"
)
.then((res) => setCoinsData(res.data));
}, []);
const Home = () => {
return (
<>
<h2>Home</h2>
<div className="app">
{coinsData.map((coin) => {
return (
<div className="coin-card" key={coin.id}>
<h2>{coin.id}</h2>
<p>
Ticker: <span className="symbol">{coin.symbol}</span>
</p>
<p>Prix: {coin.current_price} $</p>
<Link to={`/pages/${coin.id}`}>Plus d'infos</Link>
</div>
);
})}
</div>
</>
);
};
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/pages/">Single Coin</Link>
</li>
</ul>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route
path="/pages/:id"
element={<SingleCoin />}
handler={coinsData.id}
/>
</Routes>
</div>
</Router>
);
}
export default App;

SingleCoin.jsx

import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import axios from "axios";
import SinglePrice from "../components/SinglePrice";
const SingleCoin = () => {
const { id } = useParams();
const [SingleCoin, setSingleCoin] = useState({});
useEffect(() => {
axios
.get(
`https://api.coingecko.com/api/v3/coins/${id}`
)
.then((res) => setSingleCoin(res.data));
}, [id]);
return (
console.log(SingleCoin),
<article>
{/* <div className="img">
<img src={SingleCoin.image.thumb} alt="logo" />
</div> */}
<h1>{SingleCoin.symbol}</h1>
<p>{SingleCoin.coingecko_rank}</p>
<p>{SingleCoin.market_data.current_price.usd}</p>
{/* <SinglePrice /> */}
<br />
</article>
);
};

当我第一次写SingleCoin.market_data.current_price.usd时，它运行得很好。但如果我只是回到Home并转到完全相同的令牌，它会显示以下错误：

未捕获类型错误：无法读取未定义的属性(正在读取'current_price'(

我不明白为什么它第一次工作然后出错。我可能是因为我的逻辑太弱而错过了什么啊。

提前感谢各位！

PS：小更新：当我刷新时，我看到我的SingleCoin常量是空的，即使我离开页面回来也是如此。所以我可能在我的useEffect上做错了什么，但我肯定太笨了，看不到

Answer 1

好吧，有时候问问题对我的帮助真是太大了啊。

我想我找到了方法(不确定这是最好的方法，但它有效(

我只是在价格中添加了可选的连锁运营商，它很有效：

<p>{SingleCoin?.market_data?.current_price?.usd}</p>

不确定这是最好的方法，但如果它能帮助其他人，这里有一个解决方案！