上文Web3 整理React项目 导入Web3 并获取区块链信息中，我们在react搭建的dapp中简单拿到了我们区块链中的账号授权信息
那 我们继续
先终端运行
ganache -d
将ganache环境起起来
然后 我们运行 dapp 拿到授权列表 回到上文结束的一个状态
然后 我们发布一下自己的智能合约
在我们的项目终端执行
truffle migrate --reset
这样 合约就发布到我们区块链上了
下一步 就有点麻烦喽
这里 我们需要通过 abi 获取当前区块链上指定的智能合约
那么 这里 我们就需要json
这里 我们也不说更多的 先导入 grToken合约的json 然后 将这个token先打印一下看看
然后 我们 运行项目 打开浏览器的控制台
很明显 abi直接就有了
abi的问题解决了 那么address呢？
address 在 networks中
我们打开会看到 networks 下面会有一个value值 然后它下面有一个address
这个自然就没有abi那么简单了
首先中间这个value的内容你肯定不能写死 因为这是生成的 不固定的
如果写死 那么以后部署一次就要改一次代码
这个东西确实叫 networkId 他也是有办法获取出来的
我们可以通过 web3 下的 eth 下的 net 对象的get方法直接拿到它的id
可以看到 这里拿到的 也是我们最先发布的 因为就是当前区块链中存的
那么 根据这个对象结构
我们直接
grToken.networks[networkId].address
就可以轻松拿到啦
运行之后我们查看控制台
address 就被我们拿到了
那么 我们整体代码就可以改成这样
import { useEffect } from 'react';
import Web3 from "web3";
import grToken from "../build/grToken.json";
export default function PageIndex() {
useEffect(() =>{
async function start(){
var web3 = new Web3(Web3.givenProvider || "http://localhost:8545");
const WebData = await initialization(web3)
console.log(WebData)
let networkId = await web3.eth.net.getId();
const token = await new web3.eth.Contract(grToken.abi,grToken.networks[networkId].address);
console.log(token)
}
start();
},[])
// 获取web 信息
async function initialization(web3) {
let account = await web3.eth.requestAccounts();
return account
}
return (
<div>
欢迎来到 Web3 练习的世界
</div>
);
}
这里 我们通过刚才拿到的 abi 与 address
new了 web3的Contract
去获取我们合约的对象
然后 我们运行代码 查看控制台
这里 我们合约的对象就被输出出来了
但这里看着不是很明显 我们打开这个合约对象 找到 methods 查看下面有没有我们合约自己写的方法就可以了
我们之前也说过 想调用这些函数 也要通过 methods
然后 我们甚至可以如法炮制的 将交易所的json也弄进来
其实就是 引入json 然后 从json中拿abi 通过区块链拿到的networkId
拿到对应的 address
文章来源：https://www.toymoban.com/news/detail-738224.html
然后 我们运行代码查看控制台
然后打开 methods 会发现 我们交易所合约的这些订单函数也都进来了 说明是没问题的
文章来源地址https://www.toymoban.com/news/detail-738224.html
到了这里，关于Web3 React项目Dapp获取智能合约对象的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
