Solidity & React Next.js 获取合约时出错 [NPM]
Solidity & React Next.js Error not fetching Contract [NPM]
我正在尝试建立一个 NFT 市场。
出于某种原因,npm run dev
在我退出 VSCode 后停止工作(昨天 运行 完全正常)。甚至今天尝试处理它并遇到相同的错误但随后删除了 node_modules & package-lock.json 然后使用 npm install
重新安装并且工作正常。
但是现在重试同样的事情它根本不起作用并且不会让我从 NFTMarketPlace.sol 获取我的函数。
(我把所有我认为可能有用的适当代码放在下面)
请帮助 我解决这个问题。我是 React/Next.js 的新手。
谢谢!
package.json
{
"name": "xxxxx",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@nomiclabs/hardhat-ethers": "^2.0.5",
"@nomiclabs/hardhat-waffle": "^2.0.2",
"@openzeppelin/contracts": "^4.5.0",
"axios": "^0.26.0",
"chai": "^4.3.6",
"ethereum-waffle": "^3.4.0",
"ethers": "^5.5.4",
"hardhat": "^2.8.4",
"ipfs-http-client": "^56.0.1",
"next": "12.1.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"web3modal": "^1.9.5"
},
"devDependencies": {
"autoprefixer": "^10.4.2",
"eslint": "8.10.0",
"eslint-config-next": "12.1.0",
"postcss": "^8.4.7",
"tailwindcss": "^3.0.23"
}
}
错误信息:
**index.js [部分] **
import { ethers } from "ethers";
import { useEffect, useState } from "react";
import axios from "axios";
import Web3Modal from "web3modal";
import { marketplaceAddress } from "../config";
import NFTMarketplace from "../artifacts/contracts/NFTMarketplace.sol/NFTMarketplace.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 contract = new ethers.Contract(
marketplaceAddress,
NFTMarketplace.abi,
provider
);
const data = await contract.fetchMarketItems();
好吧,我意识到我的错误...因为我在安全帽上进行测试 运行 我不得不使用 npx hardhat run scripts/deploy.js --network localhost
而不是 node scripts/deploy.js
进行部署
因此,对于 运行 开发脚本,我必须执行以下命令:
npx hardhat node
npx hardhat run scripts/deploy.js --network localhost
npm run dev
我正在尝试建立一个 NFT 市场。
出于某种原因,npm run dev
在我退出 VSCode 后停止工作(昨天 运行 完全正常)。甚至今天尝试处理它并遇到相同的错误但随后删除了 node_modules & package-lock.json 然后使用 npm install
重新安装并且工作正常。
但是现在重试同样的事情它根本不起作用并且不会让我从 NFTMarketPlace.sol 获取我的函数。
(我把所有我认为可能有用的适当代码放在下面)
请帮助 我解决这个问题。我是 React/Next.js 的新手。
谢谢!
package.json
{
"name": "xxxxx",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@nomiclabs/hardhat-ethers": "^2.0.5",
"@nomiclabs/hardhat-waffle": "^2.0.2",
"@openzeppelin/contracts": "^4.5.0",
"axios": "^0.26.0",
"chai": "^4.3.6",
"ethereum-waffle": "^3.4.0",
"ethers": "^5.5.4",
"hardhat": "^2.8.4",
"ipfs-http-client": "^56.0.1",
"next": "12.1.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"web3modal": "^1.9.5"
},
"devDependencies": {
"autoprefixer": "^10.4.2",
"eslint": "8.10.0",
"eslint-config-next": "12.1.0",
"postcss": "^8.4.7",
"tailwindcss": "^3.0.23"
}
}
错误信息:
**index.js [部分] **
import { ethers } from "ethers";
import { useEffect, useState } from "react";
import axios from "axios";
import Web3Modal from "web3modal";
import { marketplaceAddress } from "../config";
import NFTMarketplace from "../artifacts/contracts/NFTMarketplace.sol/NFTMarketplace.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 contract = new ethers.Contract(
marketplaceAddress,
NFTMarketplace.abi,
provider
);
const data = await contract.fetchMarketItems();
好吧,我意识到我的错误...因为我在安全帽上进行测试 运行 我不得不使用 npx hardhat run scripts/deploy.js --network localhost
而不是 node scripts/deploy.js
因此,对于 运行 开发脚本,我必须执行以下命令:
npx hardhat node
npx hardhat run scripts/deploy.js --network localhost
npm run dev