来自 Promise 和 useState Hook 的无限循环

Question

我无意中从 fetch promise 和 react 中的 useState 钩子中创建了一个无限循环。谁能指出为什么这是重复的？我对这两个部分的理解有点薄弱，我想用正确运行的代码进行清晰的解释将有助于我了解两者的工作原理。

仅供参考 - loreReturn 变量是一个带有一些事务 ID 的对象，getData 函数会使用这些 ID 从 Web 中获取一些文本。

export function TextExample(){
  let testText = "no itemLore yet";
  const [text, textAdd] = useState(testText);
    const txs = loreReturn.data.transactions.edges;
    txs.forEach ((tx) => {arweave.transactions.getData(tx.node.id, {decode: true, string: true}).then(data => {
        console.log(data);
        textAdd(text + data);
    });
  });
  return (
    <div>
      <p>{text}</p>
    <
/div>
  ); 
};

Answer 1

将您的 API 调用放入 useEffect 挂钩并添加必要的依赖项。这将确保您不会在每次重新加载组件时重复运行 API 调用

export function TextExample(){
  let testText = "no itemLore yet";
  const [text, textAdd] = useState(testText);

  useEffect(()=>{
    const txs = loreReturn.data.transactions.edges;
    txs.forEach ((tx) => {
        arweave.transactions.getData(tx.node.id, {decode: true, string: true})
            .then(data => {
                console.log(data);
                textAdd(text + data);
      });
    });
  }, [])
    
  return (
    <div>
      <p>{text}</p>
    </div>
  ); 
};