web3-react 错误：Web3ReactProvider 未调用 getLibrary 函数

Question

我在一个简单的反应应用程序上遇到这个问题。我正在尝试使用“连接”按钮连接到元掩码，但是当我单击该按钮时，控制台显示错误“错误：不变失败：未找到”。

正如您所看到的，我向 getLibrary 函数添加了一个控制台，但它没有记录日志，因此，该函数永远不会被调用。

import "./App.css";
import React from "react";
import { Web3ReactProvider, useWeb3React } from "@web3-react/core";
import { Web3Provider } from "@ethersproject/providers";
import { InjectedConnector } from "@web3-react/injected-connector";

const injected = new InjectedConnector({
  supportedChainIds: [1, 3, 4, 5, 42],
});

function getLibrary(provider) {
  console.log("getting library") 
  const library = new Web3Provider(provider)
  library.pollingInterval = 12000
  return library
}

const App = () => {
  const { active, account, library, connector, activate, deactivate } =
    useWeb3React();

  async function connect() {
    console.log("connecting");
    try {
      await activate(injected);
    } catch (ex) {
      console.log(ex);
    }
  }

  async function disconnect() {
    try {
      deactivate();
    } catch (ex) {
      console.log(ex);
    }
  }

  return (
    <Web3ReactProvider getLibrary={getLibrary}>
      <div className="App">
        {!active ? <button onClick={connect}>Connect</button> : <button onClick={connect}>Disconnect</button>}
      </div>
     </Web3ReactProvider>
 );
}

Answer 1

这里的问题是您试图在定义上下文提供程序的同一组件中调用 use 挂钩。将 Provider 移至更高一级，进入调用 App 的组件，或者将钩子和剩余逻辑移至更低一级的新组件中。