在合约加载之前调用 useEffect 中的函数答案

【问题标题】：在合约加载之前调用 useEffect 中的函数
【发布时间】：2022-01-20 05:16:30
【问题描述】：

当我在加载提供程序时在同一范围内调用 contract?.methods.name().call() 时，它工作得非常好。当我重新加载页面时它也可以正常工作

但是，如果我在另一个 useEffect 中调用 contract?.methods.name().call()，则会在我重新加载页面时导致错误 Cannot read properties of undefined (reading 'methods')。当我使用 Next.js 时，合同尚未加载或在服务器端不可用时，似乎会调用此函数

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

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;

【问题讨论】：

标签： next.js web3

【解决方案1】：

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

【讨论】：