通过web3.js调用和访问智能合约功能?

Question

我需要知道如何通过web3.js调用这些方法到我的前端，这是在反应，也是结构数据。

// SPDX-License-Identifier: MIT
pragma solidity >=0.4.22 <0.9.0;
struct customer {
uint256 amount;
}
contract Lottery {
address payable public admin;
address payable[] public add;
mapping(address => customer) public data;

function getBalance() public view onlyOwner returns (uint256) {
return address(this).balance/1 ether;
}


function getter() view public returns (uint)
{
return add.length;
}

这是我正在使用的React的代码，但我不能调用其他函数(数组长度)

useEffect(()=>{
const getMemebers=async()=>{
const admin=await web3Api.contract.admin({
from:account
});
setAccount(admin);
}
web3Api.contract && getMemebers();
},[web3Api.web3])

Answer 1

假设你在src文件夹中设置了web3.js文件，我看到的唯一问题是你在useEffect中调用async函数，这总是一个坏主意。

你可以定义一个不同的async函数，然后在useEffect中调用它。如果你给它分配任何状态，它会为你刷新dom。我没有足够的信息来提供更好的解决方案，但我正在添加一个类似的代码，我写的和工作

import { useState, useEffect } from 'react';
import './App.css';
import web3 from './web3';
import Lottery from './lottery';
function App() {
const [manager, setManager] = useState('');
const [players, setPlayers] = useState([]);
const [balance, setBalance] = useState('0');
const [value, setValue] = useState('');
const [message, setMessage] = useState('');
const [account, setAccount] = useState('');
async function setInitials(){
let address = await Lottery.methods.manager().call();
let playerList = await Lottery.methods.getPlayers().call();
let contractBalance = await web3.eth.getBalance(Lottery.options.address);
let accounts = await web3.eth.getAccounts();
setAccount(accounts[0]);
setManager(address);
setPlayers(playerList);
setBalance(web3.utils.fromWei(contractBalance, 'ether'));
}
const enterContract = async (e) => {
try {
e.preventDefault();
setMessage('Waiting for success of transaction...')
let accounts = await web3.eth.getAccounts();
await Lottery.methods.enter().send({
from: accounts[0],
value: web3.utils.toWei(value, 'ether')
})
setMessage('Transaction successful !!!')
setValue('');
setInitials();
} catch (error) {
setMessage(`Transaction failed: ${error.message}`)
}
}
const pickWInner = async () => {
try {
setMessage('Picking Winner');
let accounts = await web3.eth.getAccounts();
await Lottery.methods.pickWinner().send({
from: accounts[0]
})
let winner = await Lottery.methods.getWinner().call();
setMessage(`Winner is ${winner}. Congratulations!!`)
setInitials();
} catch (error) {
setMessage(`Failed to pick winner: ${error.message}`)
}
}
useEffect(() => {
setInitials();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
return (
<div className="App">
<h1>Lottery App</h1>
<p>This contract is managed by: {manager}</p>
<p>Number of players participated: {players.length}</p>
{
players.length > 0 
? 
<ul>List of players currently in Contract:
{players.map((player, index) => {
return <li key={index}>{player}</li>
})}
</ul>
:
<></>
} 
<p>Total balance up for Grab: {balance} ether</p>
<hr />
<form onSubmit={enterContract}>
<h3>Want to try your luck?</h3>
<p>Enter amouth of ether you want to put in</p>
<input 
placeholder='Min 0.01 Ether'
value={value}
onChange={e => setValue(e.target.value)}
/>
<button type='Submit'>Enter</button>
</form>
{
account === manager 
?
<>
<hr />
<h2>Pick a Winner</h2>
<button onClick={pickWInner}>Pick Winner</button>
</>
:
<></>
}
<h1>{message}</h1>
</div>
);
}
export default App;