dApp开发中useEffect无限调用或完全不触发问题排查

问题根因 #

你的useEffect依赖设置逻辑完全错误：

1. 最初的无限循环是因为你把myNFTs加入了依赖数组：useEffect触发后调用接口更新myNFTs，更新后的myNFTs又触发依赖它的useEffect重新执行，形成死循环。
2. 后续完全不触发的核心原因是：组件首次挂载时如果currentAccount还未完成钱包连接（长度不满足大于5的条件），getMyWallet内的逻辑不会执行，也不会更新myNFTs，依赖数组的myNFTs永远没有变化，后续currentAccount更新后也不会触发useEffect重新执行。

修复方案 #

你应该把触发数据拉取的条件变量currentAccount加入依赖数组，而不是作为拉取结果的myNFTs：

import { useState, useEffect } from 'react';
import axios from 'axios';

// 假设currentAccount是你从钱包连接器获取的状态变量
function YourComponent({ currentAccount }) {
  const [myNFTs, setMyNFTs] = useState([]);

  useEffect(() => {
    // 钱包地址未就绪直接退出
    if (!currentAccount || currentAccount.length <= 5) return;

    async function getMyWallet() {
      const ContractObj = importSmartContract;
      const wallet = await ContractObj.methods.walletOfOwner(currentAccount).call();
      await getMyNFTs(wallet);
    }

    async function getMyNFTs(wallet) {
      try {
        const response = await axios.post('http://localhost:10000/receivedMints', { list: wallet });
        setMyNFTs(response.data.result);
      } catch (err) {
        toast.error(err.message);
      }
    }

    getMyWallet();
  }, [currentAccount]); // 仅当钱包地址变化时才重新拉取数据

  // 其余组件逻辑
}

额外优化说明 #

• 移除了组件顶层声明的wallet变量，改为在函数内部声明临时变量，避免组件重渲染时变量被重置的问题
• 将异步函数移入useEffect内部，避免额外的依赖声明，减少不必要的重复执行
• 如果你的需求是仅在组件挂载时拉取一次数据，直接将useEffect的依赖数组改为空数组[]即可

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