React中如何等待getCoin异步返回值后再传参给Chart组件

• 代码存在两个核心问题：
  1. getCoin函数没有返回axios.get()生成的Promise，就算加await也拿不到接口返回值
  2. 异步接口请求不会阻塞React的同步渲染流程，在组件渲染阶段直接同步调用异步接口，执行到给Chart传参的步骤时接口还没返回，values自然是undefined
• React不存在"等异步请求完成再开始渲染组件"的逻辑，正确流程是：组件先渲染基础框架/加载状态，请求完成后更新组件状态，触发重渲染再把拿到的数据传给子组件。

1. 修正getCoin函数，让它正确返回接口请求的Promise
2. 引入React内置的useState管理接口返回数据、加载状态，用useEffect在组件挂载、传入的币种参数data变化时触发接口请求
3. 增加状态判断，请求过程中显示加载提示，请求成功拿到数据后再渲染Chart组件，避免传undefined导致子组件报错

import React, { useState, useEffect } from "react";
import "../../App.css";
import Chart from "../Chart";
import { Button } from "../Button.js";
import "./ChartPage.css";
import axios from "axios";

async function getCoin(data) {
  const path = `/show-stocks/${data}`;
  const response = await axios.get(path);
  return response.data;
}

export default function ChartPage({ data }) {
  const [values, setValues] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchCoinData = async () => {
      try {
        setLoading(true);
        const coinData = await getCoin(data);
        setValues(coinData);
        setError(null);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };
    fetchCoinData();
  }, [data]);

  return (
    <>
      <div className="chart-page-container">
        <h1>{data} Price Market Value</h1>
        <div className="chart-container">
          {loading && <p>加载中...</p>}
          {error && <p>数据加载失败，请刷新重试</p>}
          {!loading && !error && values && <Chart data={values} />}
        </div>
        <div className="chart-page-btns">
          <Button
            link="/show-stocks/bitcoin"
            className="btns"
            buttonStyle="btn--outline2"
            buttonSize="btn--large2"
          >
            Bitcoin
          </Button>
          <Button
            link="/show-stocks/ethereum"
            className="btns"
            buttonStyle="btn--outline2"
            buttonSize="btn--large2"
          >
            Ethereum
          </Button>
          <Button
            link="/show-stocks/cardano"
            className="btns"
            buttonStyle="btn--outline2"
            buttonSize="btn--large2"
          >
            Cardano
          </Button>
        </div>
      </div>
    </>
  );
}

• useEffect的依赖项传入data后，切换不同币种时会自动重新拉取对应数据，不需要额外绑定事件触发
• 如果你的Chart组件支持传入空数据做初始化，也可以把values的初始值设成组件要求的空格式（比如空数组[]），不用等加载完再渲染组件
• 原代码里导入的Component是类组件API，函数组件不需要，已经删除

内容的提问来源于stack exchange，提问作者roee attias