在加载约定之前调用useEffect中的函数

Question

当我调用contract？时，它运行得非常好？。加载提供程序时，方法.name((.call((在同一范围内。当我重新加载页面时，它也很好用

然而，如果我叫合同？。methods.name((.call((在另一个useEffect中，它将导致一个错误。当我重新加载页面时，无法读取未定义的属性(读取"methods"(。当我使用Next.js 时，合同尚未加载或服务器端不可用时，似乎会调用此函数

我怎样才能纠正这个问题，并仍然调用合同？。methods.name((.call((在另一个useEffect中并重新加载页面？这可能吗？下面是我的代码。感谢

const Demo = (props: Props) => {
const [web3Api, setWeb3Api] = useState<{
web3: Web3 | undefined;
isProviderLoaded: boolean;
provider: any;
contract: any;
name: string;
}>({
isProviderLoaded: false,
web3: undefined,
provider: undefined,
contract: undefined,
name: "",
});
const [contractName, setContractName] = useState<string>("");
const loadProvider = async () => {
const provider = await detectEthereumProvider();
const web3 = new Web3(provider as any);
if (provider) {
const contract = await loadContract("Demo", web3);
const name = await contract?.methods.name().call();
setWeb3Api({
web3,
provider,
contract,
isProviderLoaded: true,
name,
});
}
};
useEffect(() => {
const getContractName = async () => {
// todo Cannot read properties of undefined (reading 'methods')
const contractName = await web3Api.contract.methods.name().call();
setContractName(contractName);
};
getContractName();
}, [web3Api]);
useEffect(() => {
loadProvider();
}, []);
return (
<Layout>
<p>Demo</p>
{/* Work OK */}
<p>{web3Api.name}</p>
{/* Not OK */}
<p>{contractName}</p>
</Layout>
);
};
export default Demo;

Answer 1

useEffect(() => {
const getContractName = async () => {
const contractName = await web3Api.contract.methods.name().call();
setContractName(contractName);
};
web3Api.contract && getContractName();
}, [web3Api.contract]);