如何在javascript中使用web3访问以太坊合约功能？

Question

我已经写了一个基本的世界！智能合约，并使用testrpc和松露进行部署。我在合同中有一个函数返回一个值，并且我正在使用此函数，并使用react和Java脚本代码返回该值以在网页中显示该值。代码如下

1。 Greeter.sol

pragma solidity ^0.5.0;
contract Greeter{
    string greeting;
    function greeter(string memory _greeting) public{
        greeting = _greeting;
    }

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

2。 EthereumSetup.js

import Web3 from 'web3';
    const web3 = new Web3( new Web3.providers.HttpProvider("https://localhost:8545"));
    let greeterABI = [ { constant: false,
        inputs: [ [Object] ],
        name: 'greeter',
        outputs: [],
        payable: false,
        stateMutability: 'nonpayable',
        type: 'function',
        signature: '0xfaf27bca' },
      { constant: true,
        inputs: [],
        name: 'greet',
        outputs: [ [Object] ],
        payable: false,
        stateMutability: 'view',
        type: 'function',
        signature: '0xcfae3217' } ];
    let greeterAddress = '0x52F2Ce3bB739567a05AA4eA36720028946c46C5f';
    const greeterContract = web3.eth.Contract(greeterABI,greeterAddress);

    export{greeterContract};

3.App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import {greeterContract} from './EthereumSetup';
import Web3 from 'web3'
class App extends Component {
  constructor(props){
    super(props)
    this.state={
      greeting: ""
    }
  }
 async componentWillMount(){

      var data =await greeterContract.methods.greet().call()

    this.setState({
      greeting: String(data)
    })

  }
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
            <h2>"{this.state.greeting}"</h2>
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

---

我已经运行了testrpc并且npn开始加载网页，一切正常 我打开松露控制台并发出命令来设置变量的值，甚至调用了greet（）（返回值的函数），其图像位于Truffle console image

在调用带有值的greeter函数之前，我得不到value of variable before assigning value

我知道App.js文件的componentWillMount（）中存在一些错误，这使我的网页空白。 请在这方面帮助我，我知道testrpc已经过时了