React+以太坊DApp按钮无响应求助：智能合约调用问题

我是React.js与区块链开发新手，正在尝试用React连接DApp前后端，想实现两个功能：

• 点击「sequence ID」按钮调用智能合约的mystring函数获取4个字符串
• 点击「offspring」按钮调用智能合约的evolution函数获取8个字符串

但点击两个按钮后均无任何反应，附上App.js代码和效果截图：

import React, { useState } from "react";
import { ethers } from "ethers";
import Lock from "./artifacts/contracts/Lock.sol/Lock.json";
import "./App.css";
//import { data } from 'autoprefixer';
const lockAddress = "0x5FbDB2315678afecb367f032d93F642f64180aa3";

function App() {
  const [locking, setLockingValue] = useState("");

  async function InputSequence() {
    if (typeof window.ethereum != "undefined") {
      const provider = new ethers.providers.Web3Provider(window.ethereum);
      const contract = new ethers.Contract(lockAddress, Lock.abi, provider);
      try {
        const data = await contract.MyString();
        setLockingValue(data);
        console.log("data:", data);
      } catch (err) {
        console.Console.log("ERROR:", err);
      }
    }
  }
  async function evolution(value) {
    if (!value) return;
    if (!typeof window.ethereum !== "undefined") {
      await requestAccount();
      const provider = new ethers.providers.Web3Provider(window.ethereum);
      const signer = provider.getSigner();
      const contract = new ethers.Contract(lockAddress, Lock.abi, signer);
      const transaction = await contract.evolution(value);
      await transaction.wait();
      InputSequence();
      //this.setState({myResult:data});
    }
  }

  async function requestAccount() {
    await window.ethereum.request({ method: "eth_requestAccounts" });
  }
  async function handleSubmit(event) {
    event.preventDefault();
    await evolution(event.target.lockingInput.value);
    setLockingValue(event.target.lockingInput.value);
    event.target.lockingInput.value = "";
  }
  return (
    <div className="w-full max-w-lg container">
      <div className="shadow-md rounded px-8 pt-6 pb-8 mb-4 mt-4" />
      <div className="text-gray-600 font-bold text-lg mb-2">
        SONR Ethereum Dapp
      </div>
      <div className="w-full border-4 p-2 mb-4 rounded border-gray-400">
        <div className="text-gray-600 font-bold text-md mb-2 ">
          Input sequence From Smart Contract
        </div>
        <div className="flex">
          <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
            sequence ID
          </button>
        </div>
      </div>
      <div className="w-full border-4 p-2 mb-4 rounded border-gray-400">
        <div className="text-gray-600 font-bold text-md mb-2">
          output offsprings on Smart Contract
        </div>
        <form
          className="flex items-center justify-between"
          onSubmit={(Event) => handleSubmit(Event)}
        />
        <input className="shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow" />

        <button className="bg-red-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded ">
          offsprings
        </button>
        <form />
      </div>
      <div className="w-full border-4 p-2 mb-4 rounded border-gray-400 bg-gray-100">
        <div className="text-gray-600 font-bold text-md mb-2">
          Input sequence ID
        </div>
        <p>{locking}</p>
      </div>
    </div>
  );
}

export default App;

问题排查与修复方案 #

1. 「sequence ID」按钮未绑定点击事件 #

按钮没有绑定onClick事件，点击不会触发InputSequence函数，修改按钮代码：

<button 
  className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
  onClick={InputSequence}
>
  sequence ID
</button>

2. 表单结构错误，「offsprings」按钮无法触发提交 #

表单标签错误使用自闭合写法，导致输入框和按钮不在表单范围内，无法触发handleSubmit。同时输入框缺少name属性，无法获取输入值。修复后表单结构：

<form
  className="flex items-center justify-between"
  onSubmit={handleSubmit}
>
  <input 
    className="shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow"
    name="lockingInput"
  />
  <button 
    type="submit"
    className="bg-red-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded "
  >
    offsprings
  </button>
</form>

3. evolution函数条件判断逻辑错误 #

if (!typeof window.ethereum !== "undefined")双重否定导致逻辑混乱，改为正确的判断：

if (typeof window.ethereum !== "undefined")

4. 错误日志写法错误 #

console.Console.log应为console.log，否则无法打印错误信息：

catch (err) {
  console.log("ERROR:", err);
}

5. 智能合约函数名大小写匹配问题 #

代码中调用contract.MyString()，但问题描述中合约函数为mystring，需确保ABI中的函数名与调用的名称大小写完全一致。

内容的提问来源于stack exchange，提问作者hamssa hassnawee