Question

我正在尝试构建一个使用DrizzleProvider，元掩码和React Router的以太坊Dapp。登陆页面（主页）需要显示一个带有“继续”按钮的欢迎页面，但没有DrizzleProvider注入。单击继续按钮后，它将在随后的页面中注入DrizzleProvider。这样做的目的是确保元掩码窗口不会在登录页面（主页）上自动打开，因为它与区块链无关。仅在单击继续时，它应该打开metamask窗口并请求批准。

我尝试实现的方式如下：我的index.js看起来像这样：

ReactDOM.render(
  <React.StrictMode>
      <HashRouter basename={process.env.PUBLIC_URL}>
        <App />
      </HashRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

我的App.js：

const App = () => {
  return (
    <div className="App">
      <Switch>
        <Route exact path="/" render={() => <HomePageContainer />} />
        <Route path="/with-drizzle" render={() => <DrizzleContainer />} />
        <Route render={() => <PageNotFound />} />
      </Switch>
    </div>
  );
};

export default App;

我的DrizzleContainer.js：

const DrizzleContainer = ({ inviteCode }) => {
  // initialize drizzle provider
  const drizzle = new Drizzle(drizzleOptions, reduxStore);
  if (!isLoaded(drizzle)) {
    return "loading...";
  }
  if (isEmpty(drizzle)) return <PageNotFound />;

  return (
    <drizzleReactHooks.DrizzleProvider drizzle={drizzle}>
      <drizzleReactHooks.Initializer
        error="There was an error."
        loadingContractsAndAccounts="loadding contracts & accounts..."
        loadingWeb3="loading web3...."
      >
        <DrizzleComponentRoutes />
      </drizzleReactHooks.Initializer>
    </drizzleReactHooks.DrizzleProvider>
  );
};

export default DrizzleContainer

我的DrizzleComponentRoutes.js：

const DrizzleComponentRoutes = () => {
  const history = useHistory();
  const drizzleState = drizzleReactHooks.useDrizzleState((state) => ({
    accounts: state.accounts,
  }));
  const playerAccount = drizzleState.accounts[0];
  const { useCacheCall } = drizzleReactHooks.useDrizzle();
  const level = useCacheCall(
    "MyContract",
    "getLevel",
    playerAccount.toString()
  );

  if (!isLoaded(level)) {
    return "loading...";
  }
  if (isEmpty(level)) return <PageNotFound />;

  const handleClick = () => {
    if (level === 0) history.replace("/with-drizzle/firstPath");
    else history.replace("/with-drizzle/secondPath");
  };
  return (
    <>
      <div>
        <Button onClick={handleClick} />
      </div>
      <Switch>
        <Route
          path="/with-drizzle/firstPath"
          render={() => <FirstComponent level={level} />}
        />
        <Route
          path="/with-drizzle/secondPath"
          render={() => <SecondComponent playerAccount={playerAccount} />}
        />
        <Route render={() => <PageNotFound />} />
      </Switch>
    </>
  );
};

export default DrizzleComponentRoutes;

有两个问题。首先，每次选择路线（firstPath或secondPath）时， drizzleReactHooks.DrizzleProvider 都将重新呈现和重新初始化。其次，同样在两者之间，它最终在useCacheCall（）中引发错误：

create-use-cache-call.js:19 Uncaught TypeError: Cannot read property 'methods' of undefined
    at Object.current (create-use-cache-call.js:19)
    at e.useDrizzleState (index.js:36)
    at create-use-cache-call.js:8
    at DrizzleComponentRoutes (DrizzleComponentRoutes .js:50)
    at renderWithHooks (react-dom.development.js:14803)
    at updateFunctionComponent (react-dom.development.js:17034)
    at beginWork (react-dom.development.js:18610)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22154)
    at workLoopSync (react-dom.development.js:22130)
    at performSyncWorkOnRoot (react-dom.development.js:21756)
    at react-dom.development.js:11089
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
    at flushSyncCallbackQueue (react-dom.development.js:11072)
    at discreteUpdates$1 (react-dom.development.js:21893)
    at discreteUpdates (react-dom.development.js:806)
    at dispatchDiscreteEvent (react-dom.development.js:4168)

请帮助我修复此设置。 Tx。

未捕获的TypeError：无法读取未定义的属性“方法”（useCacheCall（））

0 个答案: