如何在 React 函数组件中正确执行一次性 API 初始化请求并避免重复调用-js教程-PHP中文网

如何在 React 函数组件中正确执行一次性 API 初始化请求并避免重复调用

本文详解 React 函数组件中因状态更新触发无限重渲染导致 axios 请求反复执行的问题，核心解决方案是使用 useEffect 配合空依赖数组实现仅在组件挂载时执行一次的异步初始化逻辑，并附带进度管理与缓存优化实践。

本文详解 react 函数组件中因状态更新触发无限重渲染导致 axios 请求反复执行的问题，核心解决方案是使用 `useeffect` 配合空依赖数组实现仅在组件挂载时执行一次的异步初始化逻辑，并附带进度管理与缓存优化实践。

在 React 函数组件中，直接在函数体顶层调用异步请求（如 axios.get）是一种常见但危险的写法——它会导致每次状态更新（如 setProgress）后组件重新渲染，进而再次执行该请求，形成恶性循环，最终耗尽浏览器资源甚至崩溃。你代码中的根本问题正是：axios.get(...).then(...) 未被约束执行时机，且循环中频繁调用 setProgress(progress + 1) 触发连续重渲染。

✅ 正确做法是将数据获取逻辑移入 useEffect Hook，并通过空依赖数组 [] 明确声明“仅在组件首次挂载时运行一次”：

Ink — React for interactive command-line apps.

Ink — 用 React 开发交互式命令行应用，使用 React组件构建丰富的终端 UI。

下载

import './App.css';
import axios from 'axios';
import React, { useState, useEffect } from 'react';

function App() {
  const [allDataJson, setAllData] = useState(null);
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    // ✅ 仅在组件挂载时执行一次
    const fetchData = async () => {
      try {
        // 第一步：获取 Pokémon 列表（支持分页）
        let allResults = [];
        let url = "https://pokeapi.co/api/v2/pokemon/?offset=0&limit=20";

        while (url) {
          const response = await axios.get(url);
          allResults = [...allResults, ...response.data.results];
          url = response.data.next; // 继续下一页，直到 next 为 null
        }

        // 第二步：并发获取详情（推荐 Promise.all 提升性能）
        const detailPromises = allResults.map(async (item) => ({
          ...item,
          detail: await getDetails(item.url)
        }));

        // 使用 Promise.all 并行加载，避免串行阻塞
        const fullData = await Promise.all(detailPromises);

        // ✅ 批量更新状态，减少渲染次数
        setAllData(JSON.stringify(fullData));
      } catch (error) {
        console.error("Failed to fetch data:", error);
      }
    };

    fetchData();
  }, []); // ? 空数组确保只运行一次

  return (
    <div>
      {allDataJson ? (
        <div>✅ Completed Load</div>
      ) : (
        <div>Loading, please wait... {progress}/20</div>
      )}
    </div>
  );
}

// ✅ 优化后的缓存细节（修复原 cache 全局污染风险）
const cache = new Map();

export async function getDetails(url) {
  const id = url.split('/').filter(Boolean).at(-2); // 更健壮地提取 ID
  const cacheKey = `pokemon-${id}`;

  if (cache.has(cacheKey)) {
    return cache.get(cacheKey);
  }

  const response = await axios.get(url);
  cache.set(cacheKey, response.data);
  return response.data;
}

export default App;

? 关键注意事项：

禁止在渲染体中直接调用副作用：所有数据获取、订阅、定时器等必须封装进 useEffect；
避免在循环中逐个 await + setState：这会引发多次重渲染；应优先使用 Promise.all() 并行请求，并在最后统一 setState；
useEffect 的依赖数组必须严谨：[] 表示无依赖，仅挂载/卸载时触发；若需响应 props 或 state 变化，需显式列出依赖项；
缓存建议使用 Map 或 WeakMap：比普通对象更安全（避免原型污染），且支持任意键类型；
错误处理不可省略：生产环境务必包裹 try/catch，防止 Promise 拒绝导致白屏。

? 进阶提示：如需真实进度条（非简单计数），可结合 useReducer 管理加载状态，或使用 React.Suspense + 自定义 Hook 封装异步逻辑，进一步提升可维护性与用户体验。