React,Web3.js & Metaplex:无法从@metaplex/js导入`programs.metadata.Metadata`
React, Web3.js & Metaplex: Unable to import `programs.metadata.Metadata` from @metaplex/js
问题
正在尝试按照此处的 'your first request' 示例进行操作: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) 我通过放置 import { programs } from '@metaplex/js';
.
从模块导入 programs
步骤 3) 我尝试通过以下方式从程序中解压缩 Metadata
:const { Metadata } = programs.metadata;
在此阶段,如果我执行 npm run start
或 yarn run start
,我会看到 programs.metadata
的 属性 Metadata
未定义的错误。当我查看 node_modules/@metaplex/js/
时,我发现错误是正确的。
模块中唯一提到的元数据是在您拥有 URL 后用于查找元数据的函数。我所处的阶段是尝试检索 URL,因此尽管该包是文档中唯一提到的一个,但它没有用。
为了解决这个问题,我创建了一个空的 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-react-app),我使用以下行直接从 metaplex 包中解压 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。
问题
正在尝试按照此处的 'your first request' 示例进行操作: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) 我通过放置 import { programs } from '@metaplex/js';
.
programs
步骤 3) 我尝试通过以下方式从程序中解压缩 Metadata
:const { Metadata } = programs.metadata;
在此阶段,如果我执行 npm run start
或 yarn run start
,我会看到 programs.metadata
的 属性 Metadata
未定义的错误。当我查看 node_modules/@metaplex/js/
时,我发现错误是正确的。
模块中唯一提到的元数据是在您拥有 URL 后用于查找元数据的函数。我所处的阶段是尝试检索 URL,因此尽管该包是文档中唯一提到的一个,但它没有用。
为了解决这个问题,我创建了一个空的 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-react-app),我使用以下行直接从 metaplex 包中解压 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。