React中API关联调用获取股价？useEffect返回undefined问题排查

核心问题1：fetch_price_data未正确处理异步请求 #

你在map循环里发起fetch请求，但没有返回这个异步请求的Promise，导致map生成的数组全是undefined。另外，即使返回了Promise，也需要用Promise.all等待所有请求完成，否则await fetch_price_data()拿到的是未解析的Promise数组，不是最终的价格数据。

核心问题2：错误依赖未更新的stock_data状态 #

在fetchData中，你调用fetch_BSE_Data()拿到stock_response后，直接使用了stock_data状态——但setStockData是异步更新，此时stock_data还是组件初始的空状态，根本拿不到正确的short_name字段。

修复后的代码 #

useEffect(() => {
  const fetch_BSE_Data = async () => {
    console.log("fetching data");
    const response = await fetch(
      "https://api.bseindia.com/BseIndiaAPI/api/DefaultData/w?Fdate=20220912&Purposecode=P9&TDate=20221216&ddlcategorys=E&ddlindustrys=&scripcode=&segment=0&strSearch=S"
    );
    return response.json();
  };

  const fetch_price_data = async (stockList) => {
    // 用Promise.all等待所有异步请求完成
    const pricePromises = stockList.map((stock) => {
      let shortName = stock.short_name;
      // 正则一次性替换空格和*，避免漏处理同时包含的情况
      shortName = shortName.replace(/\s|\*/g, "");

      return fetch(`https://query1.finance.yahoo.com/v8/finance/chart/${shortName}.BO`)
        .then((response) => response.json())
        .then((response) => {
          if (response.chart.result?.[0]) {
            console.log("result: ", response.chart.result, "response: ", response.chart.result[0].meta.previousClose);
            return response.chart.result[0].meta.previousClose;
          } else {
            console.log("ERROR:", response.chart.error?.code || "Unknown error");
            return null;
          }
        })
        .catch((err) => {
          // 捕获网络请求错误，避免单个请求失败阻塞整体流程
          console.log("Request error:", err);
          return null;
        });
    });

    return Promise.all(pricePromises);
  };

  const fetchData = async () => {
    const stock_response = await fetch_BSE_Data();
    // 直接使用刚获取的stock_response，而非依赖未更新的状态
    const price_data = await fetch_price_data(stock_response);
    console.log("price_data: ", price_data);
    const mappedItems = makeMyNewData(stock_response, price_data);
    setStockData(mappedItems);
    // 注意：setStockData是异步的，这里打印stock_data还是旧值，需用useEffect监听stock_data查看更新后的值
  };

  fetchData();
}, []);

额外优化点 #

• 用正则表达式/\s|\*/g统一处理shortName的字符替换，避免漏处理同时包含空格和*的情况。
• 添加catch捕获网络请求错误，防止单个请求失败导致整个流程中断。
• 使用可选链操作符?.，避免response.chart.result为undefined时触发报错。

内容的提问来源于stack exchange，提问作者Kanchan Bharti