无法使用Promise返回值？React调用接口获取数据后取值报错如何解决

问题根因 #

• 异步执行顺序错误：fetch发起的是异步网络请求，testGetData().then(...)里的回调逻辑需要等网络请求成功后才会执行，而你写在后面的两个console.log是同步代码，会在组件初始化时立刻执行，此时请求还未返回，productData仍是空数组，访问productData[0]得到undefined，再读取productName属性自然触发报错。
• 普通变量无法持久化存储异步结果：React函数组件每次重渲染都会重新执行整个函数，你声明的productData普通变量每次都会被重置为空数组，就算请求成功完成赋值，后续组件更新也会丢失数据，应该用React提供的useState存储接口返回的数据。
• 代码冗余：testGetData里混用await和then没有实际作用，写法可以大幅简化。

修正后可运行代码 #

import logo from "./logo.svg";
import "./App.css";
import React from "react";

function App() {
  // 用state存储接口返回的商品数据
  const [productData, setProductData] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);

  React.useEffect(() => {
    // 网络请求放在useEffect中执行，避免组件重渲染时重复发起请求
    const fetchData = async () => {
      try {
        const response = await fetch("/api/products/test");
        if (!response.ok) throw new Error('接口请求失败');
        const res = await response.json();
        setProductData(res);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  // 加载中状态处理
  if (loading) return <div>加载中...</div>;
  // 错误状态处理
  if (error) return <div>请求出错：{error}</div>;
  // 确认有数据之后再访问属性
  console.log(productData);
  console.log(productData.productName);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        {/* 渲染数据时用可选链做容错，避免属性不存在时报错 */}
        <p>{productData?.productName}</p>
      </header>
    </div>
  );
}

export default App;

关键优化说明 #

• useEffect第二个参数传空数组，代表内部逻辑只会在组件首次挂载完成后执行一次，避免重复发起请求。
• 增加加载、错误状态处理，既避免渲染时报错，也能提升用户体验。
• 读取对象属性时可以用可选链运算符?.做容错，避免属性不存在时触发类型错误。

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