React组件中fetch无限重复调用API的问题求助

嘿，我太懂这个坑了！你现在遇到的无限请求循环问题，根源很明确：你把fetch直接写在了组件的顶层函数里。

React组件每次渲染（包括调用setData更新状态后触发的重新渲染），都会从头到尾执行一遍组件函数里的代码。这就导致：

• 组件渲染 → 执行fetch → 请求完成后调用setData → 状态更新触发组件重新渲染 → 再次执行fetch → 无限循环下去

解决方案：用useEffect控制请求时机 #

React的useEffect钩子就是用来处理这种“副作用”（比如API请求、DOM操作）的，它能让我们精准控制代码执行的时机。

只需要把你的fetch请求包裹在useEffect里，并且给它传一个空的依赖数组，这样这段代码就只会在组件首次挂载时执行一次，彻底解决无限调用的问题：

import { useEffect, useState } from 'react';
// 别忘了导入useEffect！

function Posts(){ 
  const classes = useStyles(); 
  const [data, setData] = useState({posts : [{ title : '' }]}); 

  // 用useEffect包裹API请求
  useEffect(() => {
    const fetchPosts = async () => {
      // 用async/await写法会更清晰，当然用then链式调用也没问题
      try {
        const res = await fetch('https://jsonplaceholder.typicode.com/posts');
        const fetchedData = await res.json();
        setData({posts: fetchedData});
      } catch (err) {
        // 建议加上错误处理，避免请求失败时的控制台报错和意外行为
        console.error('获取帖子数据失败:', err);
      }
    };

    fetchPosts();
  }, []); // 空数组 = 只在组件挂载时执行一次

  return( 
    <Container className={classes.container}> 
      {/* 这里可以渲染你的帖子数据，比如： */}
      {data.posts.map(post => (
        <div key={post.id} className={classes.postItem}>
          {post.title}
        </div>
      ))}
    </Container> 
  ) 
}

额外说明 #

如果之后你需要根据某个状态的变化重新发起请求（比如用户切换了筛选条件），只需要把那个状态变量加到useEffect的依赖数组里就行。比如：

// 假设你有一个筛选分类的状态
const [category, setCategory] = useState('all');

useEffect(() => {
  // 根据category重新请求数据
  fetch(`https://your-api.com/posts?category=${category}`)
    .then(res => res.json())
    .then(data => setData({posts: data}));
}, [category]); // 当category变化时，重新执行请求

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