0

公共注册应用程序第 3 步

我一直在按照教程进行操作，没有任何问题。在步骤 3 中，我必须添加 PublicUrlRegistrar 标签。

我会得到这个错误：

错误：这必须在 ConnectProvider 组件中使用。

  22 | const useConnectDispatch = () => {
  23 |   const dispatch = useContext(ConnectDispatchContext);
  24 |   if (!dispatch) {
> 25 |     throw new Error('This must be used within the ConnectProvider component.');
  26 |   }
  27 |   return dispatch;
  28 | };

PublicUrlRegistrar.jsx 组件

import React from "react";
import { Text } from "@blockstack/ui";
import { useConnect } from "@stacks/connect-react";
import { bufferCVFromString } from "@stacks/transactions";
import { CONTRACT_ADDRESS, CONTRACT_NAME } from "../assets/constants";

export const PublicUrlRegistrar = ({ userSession }) => {
  const { doContractCall  } = useConnect();  // <<<<<-------------------throwing error--------
  const { username } = userSession.loadUserData();
  const url = `${document.location.origin}/todos/${username}`;

  const register = () => {

    // do the contract call
    doContractCall({
      contractAddress: CONTRACT_ADDRESS,
      contractName: CONTRACT_NAME,
      functionName: "register",
      functionArgs: [bufferCVFromString(username), bufferCVFromString(url)],
      onFinish: (data) => {
        console.log({ data });
      },
    });
  };
  return (
    <>
      <Text
        color="blue"
        cursor="pointer"
        fontSize={1}
        fontWeight="500"
        onClick={() => {
          // register the public URL
          register();
        }}
      >
        Register on-chain
      </Text>
    </>
  );
};

它似乎useConnect()必须在ConnectProvider Component中使用。

即使我注释掉 PublicUrlRegistrar.jsx 函数并且只留下第 8 行，我也会得到同样的错误。

我试图弄清楚如何正确使用这个库

import { useConnect } from "@stacks/connect-react";

我已经尝试了很多事情，并且已经为此工作了一段时间，但没有任何进展。对此的任何见解都会非常有帮助！谢谢！

4

1 回答 1

0

这解决了问题，将 PublicUrlRegistrar 包装在 Connect 组件中。

  //Sharer.jsx

  import { Connect } from "@stacks/connect-react";

  ...
 
  const authOption = {
    appDetails: {
      name: 'Todos',
      icon: window.location.origin + '/logo.svg',
    },
    redirectTo: '/',
    userSession: userSession,
  }

  ...
    
  <Connect authOptions={authOption} >
     <PublicUrlRegistrar userSession={userSession} />
  </Connect>
于 2022-02-11T18:42:44.530 回答