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

Question

I need to know how can I call these methods through web3.js into my frontend which is in react and also the structure data.

// 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;
  }

Here's the code of React that I am using which is working but I am not able to call other functions(array length)

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

Answer 1

Assuming you've web3.js file set up in your src folder, the only issue I see is you're calling an async function in useEffect which is always a bad idea.

Instead you can define a different async function and call that normally in useEffect. If you assign any state to it, it'll refresh the dom for you. I don't have enough information to provide better solution but I'm adding a similar code which I wrote and which worked

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;