使用React-Moralis调用合约totalBalance函数首次渲染返回undefined问题

问题场景 #

合约定义view函数获取余额：

function totalBalance() public view returns (uint256) {
    return address(this).balance;
}

前端使用React-Moralis的useWeb3Contract钩子调用该函数：

const { runContractFunction: getFund } = useWeb3Contract({
    abi,
    contractAddress: address,
    functionName: "totalBalance",
    params: {}
});

const updateUI = async () => {
    const funds = await getFund();
    console.log(funds)
}

useEffect(() => {
    if (isWeb3Enabled) {
        updateUI()
    }
}, [isWeb3Enabled])

首次渲染时console.log(funds)输出undefined，但代码热重载后能正常打印余额。

核心原因 #

1. 闭包与依赖缺失：useEffect的依赖数组仅包含isWeb3Enabled，但getFund和updateUI函数在组件重渲染时会重新创建，首次渲染时调用的getFund可能是未完全初始化的版本。
2. 钩子初始化时机：useWeb3Contract需要依赖Web3环境完全就绪（包括abi、合约地址的正确加载），首次isWeb3Enabled变为true时，钩子可能还未完成初始化，导致getFund调用无效。

解决方法 #

方法1：完善useEffect依赖项 #

将getFund和updateUI加入依赖数组，同时用useCallback包裹updateUI避免不必要的重渲染：

import { useCallback } from 'react';

// ...

const { runContractFunction: getFund } = useWeb3Contract({
    abi,
    contractAddress: address,
    functionName: "totalBalance",
    params: {}
});

const updateUI = useCallback(async () => {
    if (!getFund) return; // 确保getFund已初始化
    const funds = await getFund();
    console.log(funds);
}, [getFund]);

useEffect(() => {
    if (isWeb3Enabled) {
        updateUI();
    }
}, [isWeb3Enabled, updateUI]);

方法2：确保abi和合约地址已就绪 #

如果abi或address是异步获取的（比如从API或本地存储加载），需等待它们加载完成后再初始化useWeb3Contract：

import { useState, useCallback } from 'react';

// 假设abi和address是状态变量，异步加载
const [abi, setAbi] = useState(null);
const [address, setAddress] = useState(null);

// 异步加载abi和address的逻辑...

// 只有当abi和address都存在时，才初始化useWeb3Contract
const { runContractFunction: getFund } = useWeb3Contract({
    abi: abi || [],
    contractAddress: address || "",
    functionName: "totalBalance",
    params: {}
});

const updateUI = useCallback(async () => {
    if (!abi || !address || !getFund) return;
    const funds = await getFund();
    console.log(funds);
}, [abi, address, getFund]);

useEffect(() => {
    if (isWeb3Enabled && abi && address) {
        updateUI();
    }
}, [isWeb3Enabled, abi, address, updateUI]);

方法3：使用React-Moralis的内置状态跟踪 #

useWeb3Contract返回的结果可以通过状态管理，结合onSuccess回调处理：

import { useState } from 'react';

const [funds, setFunds] = useState(null);

const { runContractFunction: getFund } = useWeb3Contract({
    abi,
    contractAddress: address,
    functionName: "totalBalance",
    params: {},
    onSuccess: (result) => {
        setFunds(result);
        console.log(result);
    }
});

useEffect(() => {
    if (isWeb3Enabled) {
        getFund();
    }
}, [isWeb3Enabled, getFund]);

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