文章/答案/技术大牛

发布

社区首页 >问答首页 >useEffect-Hook : React "useWeb3React()“不能在回调中调用

问useEffect-Hook : React "useWeb3React()“不能在回调中调用
EN

Ethereum用户

提问于 2021-11-25 23:18:14

回答 1查看 1.9K关注 0票数 0

将const web3React = useWeb3React();插入App.js组件后，将得到以下错误消息。

React "useWeb3React“不能在回调中调用。必须在React函数组件或自定义React函数中调用。

代码片段：

import React, { useEffect } from "react";
import { useWeb3React, Web3ReactProvider } from "@web3-react/core";
import Web3 from "web3";

import SmartContractManagementComponent from "./components/SmartContractManagementComponent";
import Navbar from "./components/Navbar";
import CreateContract from "./components/CreateContract";
import TransactionDashboard from "./components/TransactionDashboard";
import Footer from "./components/Footer";
import { WalletConnector } from "./components/wallet/WalletConnector";

const App = () => {
useEffect(() => {
    const web3React = useWeb3React();
  }, []);

  const getLibrary = (provider) => {
    return new Web3(provider);
  };

  return (

    <Web3ReactProvider getLibrary={getLibrary}>
      <div className='App'>
        <Navbar />
        <WalletConnector />
        <div className='flex flex-row w-full'>
          <CreateContract className='flex w-1/2' />
          <TransactionDashboard className='flex w-1/2' />
        </div>

        <Footer />
      </div>
    </Web3ReactProvider>
  );
};

有人能解释我在访问useWeb3React-Hook时做错了什么吗？我认为在安装了其他组件之后调用钩子很有用，这样就可以注入MetaMask了。

react

web3js

回答 1

Ethereum用户

发布于 2021-12-15 23:53:56

useWeb3React()不能在useEffect回调或任何回调中调用。它需要是组件内部的顶层。所以应该是这样的：

const App = () => {
  const web3React = useWeb3React();
...
}

这意味着您不需要useEffect来设置useWeb3React。

您还可以将getLibrary函数置于组件之外，因为它只需要调用一次才能获得库：

const getLibrary = (provider) => {
  return new Web3(provider);
};

const App = () => {
  const web3React = useWeb3React();
  return (
    <Web3ReactProvider getLibrary={getLibrary}>
     ...
    </Web3ReactProvider>
  );
}

如果您想要等到组件挂载之后，可以创建一个hasMounted布尔值，并在useEffect中将其更新为true。这样，您就可以检查和验证组件已挂载：

...

const App = () => {
  ...

  const [hasMounted, setHasMounted] = React.useState(false)
  React.useEffect(() => {
    setHasMounted(true)
  }, [])

  return (
    <>
      {hasMounted && (
        <Web3ReactProvider getLibrary={getLibrary}>
          <div className='App'>
            ...
          </div>
        </Web3ReactProvider>
      )}
    </>
  )
}

票数 1

页面原文内容由Ethereum提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://ethereum.stackexchange.com/questions/114333

复制

相似问题

问useEffect-Hook : React "useWeb3React()“不能在回调中调用
EN

回答 1

Ethereum用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问useEffect-Hook : React "useWeb3React()“不能在回调中调用EN

回答 1

Ethereum用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问useEffect-Hook : React "useWeb3React()“不能在回调中调用
EN