React中Promise与useState Hook引发无限循环的原因排查及修复方案

兄弟，你这个无限循环的坑其实是React组件渲染机制和状态更新的基础逻辑没摸透，我给你拆解开讲：

1. 组件渲染的触发逻辑：React函数组件每次调用textAdd更新text状态时，都会触发组件重新渲染——也就是整个TextExample函数会从头到尾再执行一遍。
2. 循环的触发链：你把遍历txs发起异步请求、更新状态的代码直接放在了组件顶层，意味着每次渲染都会重新执行这段代码：遍历txs→发请求→请求完成后调用textAdd→状态更新→组件重新渲染→再次遍历txs发请求……无限循环就这么形成了。
3. 额外的小隐患：你用textAdd(text + data)更新状态时，text是当前渲染周期的快照值，如果多个异步请求返回顺序不确定，后面的请求可能会覆盖前面的更新结果，导致最终的text不是正确的累加值。

解决核心是把异步请求逻辑放到useEffect里，让它只在特定时机执行，而不是每次渲染都跑。同时用函数式更新来保证状态累加的正确性：

import { useState, useEffect } from 'react';

export function TextExample(){
  const [text, textAdd] = useState("no itemLore yet");
  const txs = loreReturn.data.transactions.edges;

  useEffect(() => {
    // 初始化一个AbortController，用于组件卸载时取消请求，避免内存泄漏
    const abortController = new AbortController();

    // 把请求逻辑包在useEffect里，依赖数组设为[txs]，只有txs变化时才重新执行
    txs.forEach((tx) => {
      arweave.transactions.getData(tx.node.id, {decode: true, string: true}, { signal: abortController.signal })
        .then(data => {
          console.log(data);
          // 用函数式更新，确保基于最新的状态进行累加
          textAdd(prevText => prevText + data);
        })
        .catch(err => {
          // 如果是取消请求的错误，不用处理
          if (err.name !== 'AbortError') {
            console.error('获取数据失败:', err);
          }
        });
    });

    // 组件卸载或依赖项变化时，取消未完成的请求
    return () => abortController.abort();
  }, [txs]); // 依赖数组：当txs变化时，重新执行useEffect里的逻辑

  return (
    <div>
      <p>{text}</p>
    </div>
  );
};

• useEffect的作用：useEffect是React用来处理副作用（比如异步请求、DOM操作）的Hook，第二个参数是依赖数组：
  • 如果你传[]空数组，意味着这个逻辑只在组件首次渲染时执行一次；
  • 传[txs]的话，只有当txs的值发生变化时，才会重新执行里面的请求逻辑，完美避免了每次渲染都跑请求的问题。
• 函数式状态更新：textAdd(prevText => prevText + data)这种写法，会让React把最新的状态值传给prevText，不管异步请求返回顺序如何，都能保证状态是正确累加的，不会出现覆盖问题。
• 请求取消逻辑：添加AbortController是为了防止组件卸载后，异步请求还在继续，导致不必要的资源消耗和报错，这是处理异步请求的最佳实践之一。

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