React函数组件中获取fetch返回结果异常问题求助

你直接将fetchGames()返回的Promise对象赋值给了状态——异步函数（包括基于Promise的fetch调用）不会直接返回最终结果，而是返回一个待解析的Promise实例，只有等待它完成解析后，才能拿到实际的JSON数组。

1. 在useEffect中处理异步逻辑 #

把API调用放到useEffect内部，通过.then或async/await等待Promise解析完成后再更新状态：

修改后的App组件代码：

import React, { useEffect, useState } from 'react';
import { fetchGames } from './fetchGames'

export default function App() {
  const [state, setState] = useState({games: []})

  useEffect(() => {
    // 方式1：使用.then链式调用处理Promise
    fetchGames()
      .then(gamesData => {
        setState({ games: gamesData })
      })
      .catch(error => {
        console.error('获取游戏数据失败:', error);
        // 可在此添加错误状态设置、用户提示等逻辑
      });

    // 方式2：使用async/await（更直观的异步写法）
    // const fetchAndUpdate = async () => {
    //   try {
    //     const gamesData = await fetchGames();
    //     setState({ games: gamesData });
    //   } catch (error) {
    //     console.error('获取游戏数据失败:', error);
    //   }
    // };
    // fetchAndUpdate();
  }, [])

  return <div data-testid="games">{JSON.stringify(state.games)}</div>
}

2. 修正fetchGames函数的潜在问题 #

原代码中this.apiOptions存在问题：独立函数内this指向undefined，需将配置改为独立变量传入；同时可改为async函数简化逻辑：

修改后的fetchGames.js：

// 预先定义API请求配置（根据实际需求调整）
const apiOptions = {
  method: 'GET',
  headers: {
    // 比如添加Content-Type等请求头
  }
};

export const fetchGames = async () => {
  const response = await fetch(`https://${process.env.REACT_APP_API_URL}/api/games`, apiOptions);
  // 检查请求是否成功，非2xx状态码抛出错误
  if (!response.ok) {
    throw new Error(`请求失败，状态码：${response.status}`);
  }
  return response.json();
}

关键注意事项 #

• 不要在组件顶层直接调用异步函数并赋值变量，这会导致组件每次渲染都重复触发API请求，且无法正确获取结果。
• 必须在useEffect（或其他异步回调场景）中等待Promise解析完成后，再调用setState更新状态。
• 务必添加错误处理逻辑，避免API调用失败导致组件异常。

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