Javascript 重新呈现React JS后CoinGecko API数据未定义

正在尝试在my React组件中呈现来自的数据。它在第一次渲染时起作用，但如果我离开页面或刷新，coin.market_数据是未定义的。我还尝试将

coin

传递到

useffect（）

依赖项数组，但没有成功

import React, { useEffect, useState } from "react";
import axios from "../utils/axios";
import CoinDetail from "./CoinDetail";

function CoinPagePage() {
  const [coin, setCoin] = useState({});

  useEffect(() => {
    const getCoin = () => {
      const coinid = window.location.pathname.split("/").splice(2).toString();
      axios
        .get(`/coins/${coinid}`)
        .then((res) => {
          setCoin(res.data);
          console.log(res.data);
        })
        .catch((error) => console.log(error));
    };
    getCoin();
  }, []);

  return (
    <div>
      <CoinDetail current_price={coin.market_data.current_price.usd} />
    </div>
  );
}

export default CoinPagePage;

import React，{useffect，useState}来自“React”；
从“./utils/axios”导入axios；
从“/CoinDetail”导入CoinDetail；
函数CoinPagePage（）{
const[coin，setCoin]=useState（{}）；
useffect（（）=>{
const getCoin=（）=>{
const coinid=window.location.pathname.split（“/”）.splice（2.toString（）；
axios
.get（`/coins/${coinid}`）
。然后（（res）=>{
setCoin（res.data）；
console.log（res.data）；
})
.catch（（错误）=>console.log（错误））；
};
getCoin（）；
}, []);
返回(
);
}
导出默认页面；

只有在呈现父页面时才会出现

获取请求。重新呈现子组件将不会再次运行获取代码。您可以尝试传递
coinid
并在详细信息页面内进行获取，而不是将
current\u price
作为道具传递给
组件

这样，当页面刷新时，
请求将再次执行

编辑
如果试图访问对象上不存在的属性，应用程序将崩溃。要防止这种情况发生，您可以在尝试访问属性之前检查
请求是否已完成

一种方法是将初始状态值设置为
null

const[coin，setCoin]=useState（null）；

然后，在主
返回
上方，您可以检查值是否为
null
，如果是，则返回某种加载屏幕

if（coin==null）返回；
//主渲染
返回(
);

这样，当获取完成时，状态将更新，页面将重新呈现并显示更新的内容。
问题可能在于
窗口.location.pathname.split（“/”）.splice（2）.toString（）
，您能
控制台.log（coinid）
并检查它是否总是返回有效的id吗？我建议尝试
React Router
并从paramconsole logged
coinid
获取id，它会始终返回有效id。在我拥有所有硬币的主页上，我从API调用中获取硬币id，并将其用于链接到单个硬币页面，因此URL中的id应始终有效。当它工作时，它总是为我单击的正确硬币返回正确的API数据。当我刷新或离开页面并返回页面时，它似乎没有再次进行API调用，因为数据将被取消定义。您将必须在
组件内进行提取。将
coinid
作为道具传递给coindetail组件，并将获取代码移到coindetail中。因为价格是作为道具传递到细节页面的，所以刷新时它不会再次发送请求。所以我这样做了，我仍然有同样的问题。奇怪的是，如果do
{coin.name}
每次都有效。只要我尝试在对象中获取对象（就像
market\u data
对象中的任何内容），我就会在刷新时得到未定义的对象。将
coinid
作为道具传递给
，并将获取移到该组件中。仍然有同样的行为<代码>{coin.market\u data.current\u price.usd}
在第一次渲染时显示数据，然后显示未定义的错误，直到删除该部分代码。如果我将其粘贴回页面并在页面上点击save，它会显示价格。离开页面并返回，或刷新，未定义。它快把我逼疯了。如果API数据是我在细节组件中工作的，请尝试记录您的coinid属性，它是否曾经未定义？在Chrome开发工具（F12）中，在网络选项卡下，尝试查看对APICOIID道具的请求从未定义，并检查开发工具网络API请求是否丢失，只要存在
{coin.market\u data.current\u price.usd}
。如果我将其取出并离开
{coin.name}
它会在每次刷新时向API发出请求。通常，如果您将
res.data
保存在状态变量中，则页面应该重新渲染，尝试将初始状态值设置为
useState（null）
，然后在返回值上方键入
If（coin==null）返回加载…