使用 useContext 重新加载页面会丢失 API 数据

Question

我正在使用 RapidAPI Api 在我的项目中加载加密货币数据。数据正在我的 React 组件中加载甚至呈现，但是一旦我刷新，我必须从头开始加载数据以获取特定的硬币数据。重新加载时，我得到 TypeError: Cannot read properties of undefined (reading 'name')

这是我的代码：

import React, { useState, useEffect } from "react";
import "./Homepage.css";
import CryptoCard from "../Card/Card";
import axios from "axios";

const Homepage = () => {
  const [coinData, setCoinData] = useState([]);

  useEffect(() => {
    const i = 5;
    const options = {
      method: "GET",
      url: "https://coinranking1.p.rapidapi.com/exchanges",
      headers: {
        "x-rapidapi-host": "coinranking1.p.rapidapi.com",
        "x-rapidapi-key": "REDACTED",
      },
    };

    axios
      .request(options)
      .then((response) => {
        setCoinData(response.data.data.exchanges);
        // console.log(coinData);
        // console.log("Working!!");
      })
      .catch((error) => {
        console.error(error);
      });
  }, []);

  return (
    <div className="homepage">
      <div className="heading">
        <h1>Discover {coinData[0].name}</h1>
        <hr className="line" />
      </div>
      <div className="cards-container">
        <CryptoCard />
      </div>
    </div>
  );
};

export default Homepage;

我为什么会得到

Answer 1

错误消息的原因

coinData[0] 在最初渲染组件时不存在。您已将其定义为useState([])，因此每次创建组件时，您都会从一个新的空数组开始。因此，如果您有一些数据，您应该添加一个检查。

<h1>Discover {coinData.length > 0 && coinData[0].name}</h1>

重新获取的原因

您的useEffect 将在组件渲染时执行一次。您提出请求并将数据置于coinData 状态。但是状态不是持久的。您可以使用本地存储在页面刷新期间缓存您的请求。为此，您需要在请求完成时保留数据，并在创建状态时加载数据。

const [coinData, setCoinData] = useState([], () => {
        const localData = localStorage.getItem('coinData');
        return localData ? JSON.parse(localData) : [];
    });

useEffect(() => {
    const i = 5;
    const options = {
      method: "GET",
      url: "https://coinranking1.p.rapidapi.com/exchanges",
      headers: {
        "x-rapidapi-host": "coinranking1.p.rapidapi.com",
        "x-rapidapi-key": "REDACTED",
      },
    };

    axios
      .request(options)
      .then((response) => {
        setCoinData(response.data.data.exchanges);
        // console.log(coinData);
        // console.log("Working!!");

        // persist in localStorage
        localStorage.setItem("coinData", JSON.stringify(response.data.data.exchanges))
      })
      .catch((error) => {
        console.error(error);
      });
  }, []);

编辑：这仍然会在您每次点击刷新时发出请求，但我想这段代码会清楚地说明它是如何工作的。所以我想你可以添加一个 if 条件，如果你已经有一些数据并跳过新请求;-)