React报错Rendered more hooks than previous render修复方案

这是违反React Hooks核心调用规则导致的错误：Hooks 仅允许在React函数组件、自定义Hook的顶层作用域调用，不能在普通工具函数、循环、条件判断分支内部调用。
你的问题点非常明确：把useEffect写在了普通工具函数createData内部，而createData是在resData.map循环中执行的：

• 组件首次渲染时，resData初始值为空数组，map遍历不会执行createData，也就不会触发内部的useEffect调用，本次渲染总共执行2次useState、1次useEffect
• 第一个接口请求完成后，setResData更新状态触发重渲染，此时resData已存在列表数据，map会遍历每一项执行createData，每执行一次就会多调用一次内部的useEffect，本次渲染调用的Hook总数远大于上一次，React直接抛出该错误。

即使绕过Hook规则校验，当前写法的业务逻辑也无法正常运行：

• 所有列表项的详情请求结果都存在同一个itemData状态中，后返回的接口响应会直接覆盖之前的结果，无法存储每个id对应的独立详情数据
• 第一个useEffect中定义的mounted标记从未被实际使用，无法解决组件卸载后更新状态导致的内存泄漏问题

将详情请求逻辑移到符合Hook规则的作用域中，有两种常见实现可选：一是父组件拿到列表数据后并行拉取所有详情，用Map结构存储避免数据覆盖；二是将单行列拆分为独立子组件，在子组件内部管理自身的请求和状态。
修正后的可运行代码如下：

export default function Unpaid({ transporterId, getFn }) {
  // 改用对象结构存储id对应的数据详情，避免不同项的数据互相覆盖
  const [itemDataMap, setItemDataMap] = useState({});
  const [resData, setResData] = useState([]);
  const [loading, setLoading] = useState(false);

  const idUrl = "https://url...";

  useEffect(() => {
    // 用AbortController实现组件卸载时取消请求
    const abortController = new AbortController();
    setLoading(true);

    fetch(idUrl, { signal: abortController.signal })
      .then((res) => res.json())
      .then(async (list) => {
        setResData(list);
        // 并行拉取所有列表项对应的详情数据
        const detailReqs = list.map(async (item) => {
          const detailRes = await fetch(`https://url/${item.id}`, { signal: abortController.signal });
          const detail = await detailRes.json();
          return { id: item.id, detail };
        });
        const detailList = await Promise.all(detailReqs);
        // 转换为id为key的映射结构，方便后续按id快速取数
        const detailMap = detailList.reduce((acc, cur) => {
          acc[cur.id] = cur.detail;
          return acc;
        }, {});
        setItemDataMap(detailMap);
      })
      .catch((err) => {
        if (err.name !== 'AbortError') console.error('请求异常:', err);
      })
      .finally(() => {
        if (!abortController.signal.aborted) setLoading(false);
      });

    return () => abortController.abort();
  }, []);

  // 纯数据处理函数，内部禁止调用Hooks
  function createData(po, id) {
    return {
      po,
      id,
      itemDetail: itemDataMap[id] || []
    };
  }

  function Row(props) {
    const { row } = props;
    const [open, setOpen] = React.useState(false);
    // 如果不想在父组件批量拉取详情，也可以把详情请求移到这里
    // Row是独立React组件，在这里调用useEffect完全符合规则
    // const [itemDetail, setItemDetail] = useState([]);
    // useEffect(() => {
    //   const controller = new AbortController();
    //   fetch(`https://url/${row.id}`, {signal: controller.signal})
    //     .then(res => res.json())
    //     .then(setItemDetail)
    //   return () => controller.abort();
    // }, [row.id]);

    return (
     <>
       {/* 直接通过row.itemDetail渲染对应详情即可 */}
       jsx content
     </>
    );
  }

  const rows = resData.map((item) =>
    createData(
      item.purchase_order_details?.po_number?.length > 0
        ? item.purchase_order_details.po_number
        : "NA",
      item.id
    )
  );
 
  return (
   <>
     {loading ? <div>数据加载中...</div> : (
       <>jsx content</>
     )}
   </>
  );
}

• 所有Hook的调用必须在组件顶层，保证每次渲染时Hook的调用顺序、调用数量完全一致
• 循环渲染的列表项如果需要独立的状态、副作用逻辑，建议拆分为独立子组件，在子组件内部调用自身的Hook
• 存在依赖关系的接口请求，建议放在同一个useEffect内按顺序/并行执行，不要散落在普通工具函数中

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