在函数组件顶层直接调用 setstate（如在渲染逻辑中而非事件或副作用内），会触发状态更新 → 组件重渲染 → 再次执行顶层代码 → 再次 setstate，从而陷入无限循环。这是 react 渲染机制与状态更新同步性共同导致的经典陷阱。
当你在函数组件的顶层作用域（即组件函数体内部、return 之前）直接调用 setState(fetchApi())，React 会立即执行该语句——而 fetchApi() 是一个异步函数调用，但此处你并未 await，而是直接将 Promise 实例传入 setState。这会导致两个关键问题：
无限重渲染循环：setState 调用会触发状态变更，React 立即安排一次重渲染；新渲染再次执行组件函数体，又执行一遍 setState(...)，如此反复，形成无法终止的渲染风暴（浏览器可能卡死或报错“Too many re-renders”）。
状态值错误：setState(fetchApi()) 实际存入的是一个未完成的 Promise 对象（而非解析后的数据），后续 state 将是一个 pending Promise，而非预期的数组，导致 UI 逻辑失效。
✅ 正确做法是将副作用（如 API 请求）与状态更新解耦，使用 useEffect 控制执行时机：
import { useState, useEffect } from 'react';
export default function App() {
const [posts, setPosts] = useState([]);
useEffect(() => {
const fetchApi = async () => {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
const data = await response.json();
setPosts(data); // ✅ 在 Promise 解析后安全更新状态
} catch (err) {
console.error('API fetch failed:', err);
}
};
fetchApi();
}, []); // ? 空依赖数组确保仅在挂载时执行一次
return (
<div>
<h2>Posts ({posts.length})</h2>
{posts.slice(0, 3).map(post => (
<article key={post.id}>
<h3>{post.title}</h3>
<p>{post.body.substring(0, 60)}...</p>
</article>
))}
</div>
);
}⚠️ 注意事项：
- useEffect 是处理副作用（数据获取、订阅、手动 DOM 操作等）的唯一合规位置；
- 依赖数组 [] 表示该 effect 仅在组件挂载后运行一次，避免重复请求；
- 切勿在事件处理器外（尤其是组件顶层）直接调用 setState，除非明确用于初始化（如 setState(initialValue)，且 initialValue 是同步计算的纯值）；
- 若需条件触发请求（如搜索关键词变化），应将相关变量加入依赖数组，并配合防抖或取消机制提升健壮性。
总结：React 的函数组件每次渲染都是对函数的重新调用，因此所有顶层语句都会随每次渲染重复执行。将异步逻辑和状态更新封装进 useEffect，既是规避无限循环的必要手段，也是遵循 React 数据流设计哲学的关键实践。
