Nft

ReferenceError：合約未定義

  • July 17, 2022

在此處輸入圖像描述我正在做 Nader Dabit NFT 市場教程連結，並ReferenceError: contract is not defined在我index.js的 atasync function loadNFTs() {

我的完整程式碼index.js；

import { ethers } from 'ethers'
import { useEffect, useState } from 'react'
import axios from 'axios'
import Web3Modal from 'web3modal'

import {
 nftmarketaddress, nftaddress
} from '../config'
[![enter image description here][2]][2]
import NFT from "../artifacts/contracts/NFT.sol/NFT.json"
import Market from "../artifacts/contracts/NFTMarket.sol/NFTMarket.json"

export default function Home() {
 const [nfts, setNfts] = useState([])
 const [loadingState, setLoadingState] = useState('not-loaded')
 useEffect(() => {
   loadNFTs()
 }, [])
 async function loadNFTs() {
   /* create a generic provider and query for unsold market items */
   const provider = new ethers.providers.JsonRpcProvider()
   const tokencontract = new ethers.Contract(nftaddress, NFT.abi, provider)
   const marketContract = new ethers.Contract(nftmarketaddress, Market.abi, provider)
   const data = await contract.fetchMarketItems()

   /*
   *  map over items returned from smart contract and format 
   *  them as well as fetch their token metadata
   */
   const items = await Promise.all(data.map(async i => {
     const tokenUri = await contract.tokenURI(i.tokenId)
     const meta = await axios.get(tokenUri)
     let price = ethers.utils.formatUnits(i.price.toString(), 'ether')
     let item = {
       price,
       tokenId: i.tokenId.toNumber(),
       seller: i.seller,
       owner: i.owner,
       image: meta.data.image,
       name: meta.data.name,
       description: meta.data.description,
     }
     return item
   }))
   setNfts(items)
   setLoadingState('loaded')
 }
 if (loadingState === "loaded" && !nfts.length) return (
   <h1 className='px-20 py-10 text-3xl'>No itmes in marketplace</h1>
 )

 async function buyNft(nft) {
   /* needs the user to sign the transaction, so will use Web3Provider and sign it */
   const web3Modal = new Web3Modal()
   const connection = await web3Modal.connect()
   const provider = new ethers.providers.Web3Provider(connection)
   const signer = provider.getSigner()
   const contract = new ethers.Contract(marketplaceAddress, NFTMarketplace.abi, signer)

   /* user will be prompted to pay the asking proces to complete the transaction */
   const price = ethers.utils.parseUnits(nft.price.toString(), 'ether')
   const transaction = await contract.createMarketSale(nft.tokenId, {
     value: price
   })
   await transaction.wait()
   loadNFTs()
 }
 if (loadingState === 'loaded' && !nfts.length) return (<h1 className="px-20 py-10 text-3xl">No items in marketplace</h1>)
 return (
   <div className="flex justify-center">
     <div className="px-4" style={{ maxWidth: '1600px' }}>
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 pt-4">
         {
           nfts.map((nft, i) => (
             <div key={i} className="border shadow rounded-xl overflow-hidden">
               <img src={nft.image} />
               <div className="p-4">
                 <p style={{ height: '64px' }} className="text-2xl font-semibold">{nft.name}</p>
                 <div style={{ height: '70px', overflow: 'hidden' }}>
                   <p className="text-gray-400">{nft.description}</p>
                 </div>
               </div>
               <div className="p-4 bg-black">
                 <p className="text-2xl font-bold text-white">{nft.price} Matic</p>
                 <button className="mt-4 w-full bg-pink-500 text-white font-bold py-2 px-12 rounded" onClick={() => buyNft(nft)}>Buy</button>
               </div>
             </div>
           ))
         }
       </div>
     </div>
   </div>
 )
}

現在我得到了錯誤Error: resolver or addr is not configured for ENS name (argument="name", value="", code=INVALID_ARGUMENT, version=contracts/5.6.2)

我的更新index.js

import { ethers } from 'ethers'
import { useEffect, useState } from 'react'
import axios from 'axios'
import Web3Modal from 'web3modal'

import {
 nftmarketaddress, nftaddress
} from '../config'

import NFT from "../artifacts/contracts/NFT.sol/NFT.json"
import Market from "../artifacts/contracts/NFTMarket.sol/NFTMarket.json"

export default function Home() {
 const [nfts, setNfts] = useState([])
 const [loadingState, setLoadingState] = useState('not-loaded')
 useEffect(() => {
   loadNFTs()
 }, [])
 async function loadNFTs() {
   /* create a generic provider and query for unsold market items */
   const provider = new ethers.providers.JsonRpcProvider()
   const tokenContract = new ethers.Contract(nftaddress, NFT.abi, provider)
   const marketContract = new ethers.Contract(nftmarketaddress, Market.abi, provider)
   const data = await marketContract.fetchMarketItems()

   /*
   *  map over items returned from smart contract and format 
   *  them as well as fetch their token metadata
   */
   const items = await Promise.all(data.map(async i => {
     const tokenUri = await tokenContract.tokenURI(i.tokenId)
     const meta = await axios.get(tokenUri)
     let price = ethers.utils.formatUnits(i.price.toString(), 'ether')
     let item = {
       price,
       tokenId: i.tokenId.toNumber(),
       seller: i.seller,
       owner: i.owner,
       image: meta.data.image,
       name: meta.data.name,
       description: meta.data.description,
     }
     return item
   }))
   setNfts(items)
   setLoadingState('loaded')
 }
 if (loadingState === "loaded" && !nfts.length) return (
   <h1 className='px-20 py-10 text-3xl'>No itmes in marketplace</h1>
 )

 async function buyNft(nft) {
   /* needs the user to sign the transaction, so will use Web3Provider and sign it */
   const web3Modal = new Web3Modal()
   const connection = await web3Modal.connect()
   const provider = new ethers.providers.Web3Provider(connection)
   const signer = provider.getSigner()
   const contract = new ethers.Contract(marketplaceAddress, NFTMarketplace.abi, signer)

   /* user will be prompted to pay the asking proces to complete the transaction */
   const price = ethers.utils.parseUnits(nft.price.toString(), 'ether')
   const transaction = await contract.createMarketSale(nft.tokenId, {
     value: price
   })
   await transaction.wait()
   loadNFTs()
 }
 if (loadingState === 'loaded' && !nfts.length) return (<h1 className="px-20 py-10 text-3xl">No items in marketplace</h1>)
 return (
   <div className="flex justify-center">
     <div className="px-4" style={{ maxWidth: '1600px' }}>
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 pt-4">
         {
           nfts.map((nft, i) => (
             <div key={i} className="border shadow rounded-xl overflow-hidden">
               <img src={nft.image} />
               <div className="p-4">
                 <p style={{ height: '64px' }} className="text-2xl font-semibold">{nft.name}</p>
                 <div style={{ height: '70px', overflow: 'hidden' }}>
                   <p className="text-gray-400">{nft.description}</p>
                 </div>
               </div>
               <div className="p-4 bg-black">
                 <p className="text-2xl font-bold text-white">{nft.price} Matic</p>
                 <button className="mt-4 w-full bg-pink-500 text-white font-bold py-2 px-12 rounded" onClick={() => buyNft(nft)}>Buy</button>
               </div>
             </div>
           ))
         }
       </div>
     </div>
   </div>
 )
}

看起來您contract在loadNFTs方法中使用的地方只有幾個地方沒有contract被定義。我們在函式的範圍內擁有tokenContract並且可用，並且沒有可以使用的變數。您在方法中使用的地方只需要在適當的地方替換:)marketContract``loadNFTs``contract``contract``loadNFTs``marketContract``tokenContract

import { ethers } from 'ethers'
import { useEffect, useState } from 'react'
import axios from 'axios'
import Web3Modal from 'web3modal'

import {
 nftmarketaddress, nftaddress
} from '../config'

import NFT from "../artifacts/contracts/NFT.sol/NFT.json"
import Market from "../artifacts/contracts/NFTMarket.sol/NFTMarket.json"

export default function Home() {
 const [nfts, setNfts] = useState([])
 const [loadingState, setLoadingState] = useState('not-loaded')
 useEffect(() => {
   loadNFTs()
 }, [])
 async function loadNFTs() {
   /* create a generic provider and query for unsold market items */
   const provider = new ethers.providers.JsonRpcProvider()
   const tokenContract = new ethers.Contract(nftaddress, NFT.abi, provider)
   const marketContract = new ethers.Contract(nftmarketaddress, Market.abi, provider)
   // `marketContract` instead of `contract`
   const data = await marketContract.fetchMarketItems()

   /*
   *  map over items returned from smart contract and format 
   *  them as well as fetch their token metadata
   */
   const items = await Promise.all(data.map(async i => {
     // `tokenContract` rather than `contract` here
     const tokenUri = await tokenContract.tokenURI(i.tokenId)
     const meta = await axios.get(tokenUri)
     let price = ethers.utils.formatUnits(i.price.toString(), 'ether')
     let item = {
       price,
       tokenId: i.tokenId.toNumber(),
       seller: i.seller,
       owner: i.owner,
       image: meta.data.image,
       name: meta.data.name,
       description: meta.data.description,
     }
     return item
   }))
   setNfts(items)
   setLoadingState('loaded')
 }
 if (loadingState === "loaded" && !nfts.length) return (
   <h1 className='px-20 py-10 text-3xl'>No itmes in marketplace</h1>
 )

 async function buyNft(nft) {
   /* needs the user to sign the transaction, so will use Web3Provider and sign it */
   const web3Modal = new Web3Modal()
   const connection = await web3Modal.connect()
   const provider = new ethers.providers.Web3Provider(connection)
   const signer = provider.getSigner()
   const contract = new ethers.Contract(marketplaceAddress, NFTMarketplace.abi, signer)

   /* user will be prompted to pay the asking proces to complete the transaction */
   const price = ethers.utils.parseUnits(nft.price.toString(), 'ether')
   const transaction = await contract.createMarketSale(nft.tokenId, {
     value: price
   })
   await transaction.wait()
   loadNFTs()
 }
 if (loadingState === 'loaded' && !nfts.length) return (<h1 className="px-20 py-10 text-3xl">No items in marketplace</h1>)
 return (
   <div className="flex justify-center">
     <div className="px-4" style={{ maxWidth: '1600px' }}>
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 pt-4">
         {
           nfts.map((nft, i) => (
             <div key={i} className="border shadow rounded-xl overflow-hidden">
               <img src={nft.image} />
               <div className="p-4">
                 <p style={{ height: '64px' }} className="text-2xl font-semibold">{nft.name}</p>
                 <div style={{ height: '70px', overflow: 'hidden' }}>
                   <p className="text-gray-400">{nft.description}</p>
                 </div>
               </div>
               <div className="p-4 bg-black">
                 <p className="text-2xl font-bold text-white">{nft.price} Matic</p>
                 <button className="mt-4 w-full bg-pink-500 text-white font-bold py-2 px-12 rounded" onClick={() => buyNft(nft)}>Buy</button>
               </div>
             </div>
           ))
         }
       </div>
     </div>
   </div>
 )
}

引用自：https://ethereum.stackexchange.com/questions/131900

相關問答

Solidity

將 ERC2981 版稅添加到 ERC721 合約

  • November 25, 2022
檢視問答
Solidity

具有自定義資料結構的 NFT

  • November 24, 2022
檢視問答
Tokens

創建多個 NFT 收藏的正確方法是什麼？

  • November 24, 2022
檢視問答
Nft

什麼是 NFT 代幣元數據或 URI？

  • November 23, 2022
檢視問答
Solidity

Hardhat - 如何驗證契約

  • November 23, 2022
檢視問答
Solidity

opensea 如何準確地獲取基本 URI，如果我更新它會發生什麼？

  • November 22, 2022
檢視問答