React组件中CoinGecko API数据首次渲染正常，重渲染/刷新后coin.market_data undefined的问题求助

看起来你遇到的是异步数据加载时的属性访问错误，我来帮你拆解问题并给出解决方案：

问题根源 #

你的组件初始state是const [coin, setCoin] = useState({});，当页面刷新或从其他页面返回时，API请求还处于pending状态，这时候coin还是空对象，直接访问coin.market_data.current_price.usd就会因为market_data不存在而抛出undefined错误。而你之前把coin加入useEffect依赖数组，只会导致无限循环请求（因为每次setCoin都会更新coin，触发useEffect重新执行），根本没解决核心问题。

解决方案 #

我给你几个逐步优化的方案：

1. 用可选链操作符避免崩溃 #

最直接的修复是在访问嵌套属性时使用可选链操作符?.，它会在属性不存在时安全返回undefined，而不是抛出错误：

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

这样即使API还没返回数据，组件也不会崩溃，你还可以在CoinDetail组件里处理current_price为undefined的情况（比如显示“数据加载中...”）。

2. 添加加载状态提升用户体验 #

为了让用户明确知道数据在加载，建议添加一个loading状态：

function CoinPagePage() {
  const [coin, setCoin] = useState({});
  const [loading, setLoading] = useState(true); // 新增加载状态

  useEffect(() => {
    const getCoin = async () => { // 改成async/await更清晰
      try {
        const coinid = window.location.pathname.split("/").splice(2).toString();
        const res = await axios.get(`/coins/${coinid}`);
        setCoin(res.data);
      } catch (error) {
        console.log(error);
      } finally {
        setLoading(false); // 无论成功失败都结束加载
      }
    };
    getCoin();
  }, []);

  // 加载中显示提示
  if (loading) {
    return <div>加载中...</div>;
  }

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

3. 正确获取路由参数（推荐） #

你现在手动解析window.location.pathname的方式不够可靠，如果用的是React Router，应该用useParams()钩子来获取路由参数，比如你的路由定义是/coins/:coinId，可以这样改：

import { useParams } from 'react-router-dom'; // 先导入useParams

function CoinPagePage() {
  const [coin, setCoin] = useState({});
  const [loading, setLoading] = useState(true);
  const { coinId } = useParams(); // 获取路由参数

  useEffect(() => {
    const getCoin = async () => {
      if (!coinId) return; // 避免无参数时请求
      try {
        const res = await axios.get(`/coins/${coinId}`);
        setCoin(res.data);
      } catch (error) {
        console.log(error);
      } finally {
        setLoading(false);
      }
    };
    getCoin();
  }, [coinId]); // 依赖coinId，路由参数变化时重新请求

  // ... 后续渲染逻辑
}

这样当路由参数变化时，组件会自动重新请求对应的数据，也避免了手动解析路径的错误。

总结 #

核心问题是异步数据未加载完成时的属性访问错误，通过可选链避免崩溃、加载状态提升体验、正确获取路由参数这三个方案，就能彻底解决你遇到的问题啦！

内容的提问来源于stack exchange，提问作者tim-carey-code