求助：React Hook useEffect无法在顶层调用的问题

问题根源 #

1. 组件函数不能是async：你把GetVerse定义成了async函数，React组件必须返回JSX元素，而async函数默认返回Promise，这不仅不符合组件要求，还会干扰React Hooks的执行规则，导致报错。
2. useEffect的回调不能是async：useEffect的回调函数如果是async，会返回Promise，而React期望回调要么返回清理函数，要么什么都不返回，这会引发潜在的内存泄漏问题。
3. useEffect缺少依赖项数组：你的useEffect没有传第二个参数（依赖项数组），会导致组件每次渲染都重复执行请求，浪费资源。

修复后的代码 #

import React, { useEffect } from "react";

const GetVerse = () => {
  useEffect(() => {
    // 内部定义async函数处理异步请求
    const fetchVerseData = async () => {
      try {
        const fetchVerse = await fetch(
          "https://bhagavad-gita3.p.rapidapi.com/v2/chapters/1/verses/null/"
        );
        // 检查请求是否成功
        if (!fetchVerse.ok) {
          throw new Error(`请求失败: ${fetchVerse.status}`);
        }
        const verseBody = await fetchVerse.json();
        console.log(verseBody);
      } catch (error) {
        console.error("获取经文失败:", error);
      }
    };

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

  return <div></div>;
};

export default GetVerse;

关键修复说明 #

• 移除组件函数的async关键字，确保组件返回JSX元素。
• 在useEffect内部单独定义异步函数fetchVerseData并调用，避免直接把async作为useEffect的回调。
• 添加空的依赖项数组[]，让这个副作用只在组件首次挂载时执行一次。
• 增加try/catch捕获请求错误，避免请求失败时无错误处理。

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