React组件触发无限API请求问题求助

问题原因 #

你直接把fetch请求写在组件函数的顶层代码中，每次组件渲染（包括调用setData更新状态后触发的重新渲染）都会执行这个请求，而请求完成后调用setData又会再次触发组件渲染，形成无限循环。

修复后的代码 #

修改后的App.js #

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

const App = () => {
  const [data, setData] = useState([]);

  // 使用useEffect控制请求只执行一次
  useEffect(() => {
    fetch(`http://localhost/api/index.php`)
      .then(res => res.json())
      .then(fetchedData => {
        setData(fetchedData);
      })
      .catch(err => {
        // 添加错误处理，避免请求失败时无提示
        console.error('请求数据失败:', err);
      });
  }, []); // 空依赖数组表示只在组件挂载时执行一次

  return (
    <div>
      {data.length > 0 && (
        <ul>
          {data.map(ad => (
            // 修正原代码中变量名不匹配的问题
            <li key={ad.id}>
              <h3>{ad.name}</h3>
              <p>{ad.details}</p>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default App;

关键说明 #

• useEffect的作用：useEffect是React的副作用钩子，专门处理组件中的异步操作、订阅等副作用逻辑。当第二个参数（依赖数组）为空时，回调函数只会在组件首次挂载时执行一次，彻底避免重复触发请求。
• 变量名修正：原代码中map循环的参数是ad，但内部误用了未定义的info变量，这会导致运行报错，已统一修正为ad。
• 错误处理：新增catch块处理请求失败的情况，便于调试排查问题。

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