如何正确使用fetch()调用Web API？React表单stockData undefined修复

提交表单后打印stockData得到undefined，核心原因是API请求是异步操作——更新symbol后，API请求还未完成，stockData不会立刻更新，同时原代码的useEffect依赖项设置错误，会导致不必要的重复请求。

以下是修复后的代码：

"use client";

import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";

const MY_API_KEY = process.env.NEXT_PUBLIC_MY_API_KEY;

const Home = () => {
  const [stockData, setStockData] = useState();
  const [symbol, setSymbol] = useState();
  const { register, handleSubmit } = useForm();

  useEffect(() => {
    if (!symbol) return;
    
    const fetchStockData = async () => {
      try {
        const apiCall = `https://www.alphavantage.co/query?function=TIME_SERIES_DAILY_ADJUSTED&symbol=${symbol}&outputsize=full&apikey=${MY_API_KEY}`;
        const response = await fetch(apiCall);
        const data = await response.json();
        const dailyData = data["Time Series (Daily)"];
        setStockData(dailyData);
        // API请求完成后打印数据
        console.log(dailyData);
      } catch (error) {
        console.error("获取股票数据失败:", error);
      }
    };

    fetchStockData();
  }, [symbol]); // 仅依赖symbol，避免无限循环

  return (
    <form
      onSubmit={handleSubmit(({ symbol }) => {
        setSymbol(symbol);
        // 这里不要直接打印stockData，此时异步请求还未完成
      })}
    >
      <label>symbol</label>
      <input {...register("symbol")} />
      <input type="submit" />
    </form>
  );
};

export default Home;

关键修复点： #

• 移除useEffect依赖中的stockData：原代码中依赖stockData会导致每次setStockData后重新触发请求，造成无限循环，只需要监听symbol变化即可发起新请求。
• 将打印逻辑移到API请求完成后：只有当异步请求成功返回数据，才能拿到有效的股票数据，此时打印才会得到正确结果。
• 改用async/await优化异步代码可读性：比链式then更直观，同时增加错误捕获处理请求失败的情况。
• 移除重复的outputsize参数：原URL中同时存在outputsize=compact和outputsize=full，会导致参数冲突，保留outputsize=full即可。

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