React，Web3.js & Metaplex:无法从@metaplex/js导入`programs.metadata.Metadata`

Question

问题

在这里尝试遵循“您的第一个请求”示例：https://docs.metaplex.com/sdk/js/getting-started#your-first-request

示例中提到的模块不包含所需的数据。

对于上下文，我使用这个示例来开发在以下说明的步骤5中解释的解决方案：https://gist.github.com/creativedrewy/9bce794ff278aae23b64e6dc8f10e906

复制步骤

步骤1)我通过：@metaplex/js安装程序包：yarn add @metaplex/js

步骤2)通过放置programs从模块导入import { programs } from '@metaplex/js';。

步骤3)我尝试通过：Metadata从程序中解压缩const { Metadata } = programs.metadata;

在此阶段，如果执行npm run start或yarn run start，则会看到programs.metadata的属性Metadata未定义的错误。当我查看node_modules/@metaplex/js/时，我发现错误是正确的。

模块中唯一提到的元数据是用于在获得URL后查找元数据的函数。我所处的阶段是试图检索URL，因此这个包并不有用，尽管它是文档中唯一引用的包。

Answer 1

为了解决这个问题，我创建了一个空的react应用程序，并将以下依赖项添加到我的package.json文件中：

  "@metaplex/js": "^1.1.1",
  "@solana/spl-token": "^0.1.8",
  "@solana/web3.js": "^1.24.1",

然后，我在应用程序的根目录中运行npm install。

在App.js内部(或者index.js，如果您没有使用create app)，我直接从元复合包中解压Metadata，行如下，放在文件的顶部：

import { Metadata } from '@metaplex/js';

在所有导入下面，我添加了以下代码(从原始问题中的示例中编辑的代码)：

const connection = new Connection('devnet');
const tokenPublicKey = 'Gz3vYbpsB2agTsAwedtvtTkQ1CG9vsioqLW3r9ecNpvZ';

const run = async () => {
  try {
    const ownedMetadata = await Metadata.load(connection, tokenPublicKey);
    console.log(ownedMetadata);
  } catch {
    console.log('Failed to fetch metadata');
  }
};

在我的实现中，我在App()函数中使用一个按钮，而不是像在示例中那样直接调用run()：

<button
  onClick={run}
>
  GALLERY
</button>

现在，单击该按钮时，我正确地看到控制台中显示的元数据JSON。