在Coingecko上抓取王子的问题(反应)

Question

我试着玩Coingecko API只是为了更好的反应，但我已经卡住了

通用应用程序目前非常简单，索引显示的是所有标记的卡片和价格。每一张卡片都可以点击到一个更详细的页面上。

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时，它工作得非常完美。但是，如果我回到家，回到完全相同的标记上，它就会显示出以下错误：

Uncaught :无法读取未定义的属性(读取'current_price')

我不明白为什么它第一次起作用的时候就会出毛病。我可能是因为我的弱逻辑而错过了什么。

提前感谢各位！

PS :小更新:我看到我的SingleCoin const在刷新时是空的，即使当我离开页面并返回时也是如此。所以我可能做错了我的useEffect，但我肯定是太傻了，看不见它

Answer 1

好吧，有时候问问题对我有多大帮助，真是太疯狂了。

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

我只是在价格中添加了可选的链式操作符，它起作用了：

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

不确定这是最好的方式进行，但如果它可以帮助别人，这里有一个解决方案！