通過 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 中調用異步函數，這總是一個壞主意。

相反，您可以定義一個不同的異步函數並通常在 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;