![](/img/trans.png)
[英]Solidity : Problem to display value from my smart contract to react
[英]NULL value returned when trying to fetch data from solidity smart contract from react js
我正在尝试使用以太坊区块链制作学生管理系统。 我已将我的智能合约(solidity)与 react 前端联系起来。 我尝试从智能合约中获取设置的值,但这会在控制台中返回“null”。 但是智能合约运行良好。 我将链接我的智能合约和下面的 App.js 代码。 请帮我解决这个问题。 由于我是开发的新手,所以我不太了解它。 提前致谢。
智能合约代码
pragma solidity >=0.4.22 <0.9.0;
contract SimpleStorage{
string name;
string dept;
uint phonenumber;
string addresshome;
string emailid;
uint aadhar;
string ipfshash1;
string ipfshash2;
string ipfshash3;
string ipfshash4;
constructor() public {
phonenumber=0;
aadhar=0;
}
function setname(string memory _name) public {
name=_name;
}
function getname() public view returns(string memory){
return name;
}
function setdept(string memory _dept) public {
dept=_dept;
}
function getdept() public view returns(string memory){
return dept;
}
function setphonenumber(uint _phonenumber) public{
phonenumber=_phonenumber;
}
function getphonenumber() public view returns(uint){
return phonenumber;
}
function setaddresshome(string memory _addresshome) public {
addresshome=_addresshome;
}
function getaddresshome() public view returns(string memory ){
return addresshome;
}
function setemailid(string memory _emailid) public {
emailid=_emailid;
}
function getemailid() public view returns(string memory){
return emailid;
}
function setaadhar(uint _aadhar) public {
aadhar=_aadhar;
}
function getaadhar() public view returns(uint){
return aadhar;
}
}
App.js 代码
import React, { useState } from 'react';
import Web3 from 'web3';
import { simpleStorageAbi } from './abi/abis';
import './App.css';
const web3 = new Web3(Web3.givenProvider);
// contract address is provided by Truffle migration
const contractAddr = '0x262E2078217937978cccd3a08681AdD77D5DdFE3';
const SimpleContract = new web3.eth.Contract(simpleStorageAbi, contractAddr);
function App() {
const [name, setName] = useState();
const [getName, setGetName] = useState();
const [dept, setDept] = useState();
const [getDept, setGetDept] = useState();
const [phonenumber, setPhonenumber] = useState();
const [getPhonenumber, setGetPhonenumber] = useState();
const [homeaddress, setHomeaddress] = useState();
const [getHomeaddress, setGetHomeaddress] = useState();
const [emailid, setEmailid] = useState();
const [getEmailid, setGetEmailid] = useState();
const [aadhar, setAadhar] = useState();
const [getAadhar, setGetAadhar] = useState();
const handleNameSet = async (e) => {
e.preventDefault();
const accounts = await window.ethereum.enable();
const account = accounts[0];
const gas = await SimpleContract.methods.setname(name).estimateGas();
const result = await SimpleContract.methods.setname(name).send({
from: account,
gas
})
console.log(result);
}
const handleNameGet = async (e) => {
e.preventDefault();
const result = await SimpleContract.methods.getname().call();
setGetName(result);
console.log(result);
}
const handleDeptSet = async (e) => {
e.preventDefault();
const accounts = await window.ethereum.enable();
const account = accounts[0];
const gas = await SimpleContract.methods.setdept(dept).estimateGas();
const result = await SimpleContract.methods.setdept(dept).send({
from: account,
gas
})
console.log(result);
}
const handleDeptGet = async (e) => {
e.preventDefault();
const result = await SimpleContract.methods.getdept().call();
setGetDept(result);
console.log(result);
}
const handlePhonenumberSet = async (e) => {
e.preventDefault();
const accounts = await window.ethereum.enable();
const account = accounts[0];
const gas = await SimpleContract.methods.setphonenumber(name).estimateGas();
const result = await SimpleContract.methods.setphonenumber(name).send({
from: account,
gas
})
console.log(result);
}
const handlePhonenumberGet = async (e) => {
e.preventDefault();
const result = await SimpleContract.methods.getphonenumber().call();
setGetPhonenumber(result);
console.log(result);
}
const handleHomeaddressSet = async (e) => {
e.preventDefault();
const accounts = await window.ethereum.enable();
const account = accounts[0];
const gas = await SimpleContract.methods.setaddresshome(name).estimateGas();
const result = await SimpleContract.methods.setaddresshome(name).send({
from: account,
gas
})
console.log(result);
}
const handleHomeaddressGet = async (e) => {
e.preventDefault();
const result = await SimpleContract.methods.getaddresshome().call();
setGetHomeaddress(result);
console.log(result);
}
const handleEmailidSet = async (e) => {
e.preventDefault();
const accounts = await window.ethereum.enable();
const account = accounts[0];
const gas = await SimpleContract.methods.setemailid(name).estimateGas();
const result = await SimpleContract.methods.setemailid(name).send({
from: account,
gas
})
console.log(result);
}
const handleEmailidGet = async (e) => {
e.preventDefault();
const result = await SimpleContract.methods.getemailid().call();
setGetEmailid(result);
console.log(result);
}
const handleAadharSet = async (e) => {
e.preventDefault();
const accounts = await window.ethereum.enable();
const account = accounts[0];
const gas = await SimpleContract.methods.setaadhar(name).estimateGas();
const result = await SimpleContract.methods.setaadhar(name).send({
from: account,
gas
})
console.log(result);
}
const handleAadharGet = async (e) => {
e.preventDefault();
const result = await SimpleContract.methods.getaadhar().call();
setGetAadhar(result);
console.log(result);
}
return (
<div className="App">
<header className="App-header">
<h1> Student Details </h1>
</header>
<div className="wrapper">
<form className= "Form" onSubmit={handleNameSet}>
<label>
<h3 style={{textAlign:"left",marginBottom:"0.5px",fontFamily:"unset"}}>NAME:</h3>
<input className="Form"
type="text"
name="name"
value={name}
onChange={ e => setName(e.target.value) } />
</label>
<input className="body" type="submit" value="Set it" />
<button
className="body"
onClick={handleNameGet}
type="button" >
Get it
</button>
{ getName }
</form>
<form className= "Form" onSubmit={handleDeptSet}>
<label>
<h3 style={{textAlign:"left",marginBottom:"0.5px",fontFamily:"unset"}}>DEPARTMENT:</h3>
<input className="Form"
type="text"
name="dept"
value={dept}
onChange={ e => setDept(e.target.value) } />
</label>
<input className="body" type="submit" value="Set it" />
<button
className="body"
onClick={handleDeptGet}
type="button" >
Get it
</button>
{ getDept }
</form>
<form className= "Form" onSubmit={handlePhonenumberSet}>
<label>
<h3 style={{textAlign:"left",marginBottom:"0.5px",fontFamily:"unset"}}>PHONE NUMBER:</h3>
<input className="Form"
type="text"
name="dept"
value={phonenumber}
onChange={ e => setPhonenumber(e.target.value) } />
</label>
<input className="body" type="submit" value="Set it" />
<button
className="body"
onClick={handlePhonenumberGet}
type="button" >
Get it
</button>
{ getPhonenumber }
</form>
<form className= "Form" onSubmit={handleHomeaddressSet}>
<label>
<h3 style={{textAlign:"left",marginBottom:"0.5px",fontFamily:"unset"}}>ADDRESS:</h3>
<input className="Form"
type="text"
name="name"
value={homeaddress}
onChange={ e => setHomeaddress(e.target.value) } />
</label>
<input className="body" type="submit" value="Set it" />
<button
className="body"
onClick={handleHomeaddressGet}
type="button" >
Get it
</button>
{ getHomeaddress }
</form>
<form className= "Form" onSubmit={handleEmailidSet}>
<label>
<h3 style={{textAlign:"left",marginBottom:"0.5px",fontFamily:"unset"}}>EMAIL ID:</h3>
<input className="Form"
type="text"
name="name"
value={emailid}
onChange={ e => setEmailid(e.target.value) } />
</label>
<input className="body" type="submit" value="Set it" />
<button
className="body"
onClick={handleEmailidGet}
type="button" >
Get it
</button>
{ getEmailid }
</form>
<form className= "Form" onSubmit={handleAadharSet}>
<label>
<h3 style={{textAlign:"left",marginBottom:"0.5px",fontFamily:"unset"}}>AADHAR NO.:</h3>
<input className="Form"
type="text"
name="name"
value={aadhar}
onChange={ e => setAadhar(e.target.value) } />
</label>
<input className="body" type="submit" value="Set it" />
<button
className="body"
onClick={handleAadharGet}
type="button" >
Get it
</button>
{ getAadhar }
</form>
<br/>
</div>
<button className="files" type="button" >Add files..</button>
</div>
);
};
export default App;
你可以签入你的“abi”。 我通过更改 abi 中的“输出”键解决了同样的问题,如下所示。
const abi = [
{
constant: true,
inputs: [],
name: 'manager',
outputs: [{ name: '', type: 'address' }],
payable: false,
stateMutability: 'view',
type: 'function',
}]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.