呼叫恢复异常

Question

Following a tutorial on Solidity and am working on the front end and end up getting hit with this error

It won't let me fetch the greeting but I can set the greeting everything else works except for the fetch greeting, it won't let me see it even if I set the greeting to something else I can't see it in the console only the error here is the Solidity tutorial

Here is my solidity code

pragma solidity ^0.8.4;

import "hardhat/console.sol";


contract Greeter {
  string greeting;

  constructor(string memory _greeting) {
    console.log("Deploying a Greeter with greeting:", _greeting);
    greeting = _greeting;
  }

  function greet() public view returns (string memory) {
    return greeting;
  }

  function setGreeting(string memory _greeting) public {
    console.log("Changing greeting from '%s' to '%s'", greeting, _greeting);
    greeting = _greeting;
  }
}

And here is my react code:

import './App.css';
import { useState } from 'react';
import { ethers } from 'ethers'
import Greeter from './artifacts/contracts/Greeter.sol/Greeter.json'

// Update with the contract address logged out to the CLI when it was deployed 
const greeterAddress = "0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266"

function App() {
  // store greeting in local state
  const [greeting, setGreetingValue] = useState()

  // request access to the user's MetaMask account
  async function requestAccount() {
    await window.ethereum.request({ method: 'eth_requestAccounts' });
  }

  // call the smart contract, read the current greeting value
  async function fetchGreeting() {
    if (typeof window.ethereum !== 'undefined') {
      const provider = new ethers.providers.Web3Provider(window.ethereum)
      const contract = new ethers.Contract(greeterAddress, Greeter.abi, provider)
      try {
        const data = await contract.greet()
        console.log('data: ', data)
      } catch (err) {
        console.log("Error: ", err)
      }
    }    
  }

  // call the smart contract, send an update
  async function setGreeting() {
    if (!greeting) 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(greeterAddress, Greeter.abi, signer)
      const transaction = await contract.setGreeting(greeting)
      await transaction.wait()
      fetchGreeting()
    }
  }

  return (
    <div className="App">
      <header className="App-header">
        <button onClick={fetchGreeting}>Fetch Greeting</button>
        <button onClick={setGreeting}>Set Greeting</button>
        <input onChange={e => setGreetingValue(e.target.value)} placeholder="Set greeting" />
      </header>
    </div>
  );
}

export default App;

Any advice would help thx

Answer 1

You need insert the attribute value

value = {greeting}

in the input:

  <input onChange={e => setGreetingValue(e.target.value)} 
        placeholder="Introduce uno nuevo" 
        value={greeting}
        />

Also initialize with two quotes useState ():

const [greeting, setGreetingValue] = useState ('')

You will probably now have a issue with the metamask nonce, which will tell you that it is too high like message error like this:

Nonce too high. Expected nonce to be 1 but got 2

You will reset account in metamask, or import a new account.