如何在前端显示“methods.name.call()”web3 - 方法的结果

Question

我正在开发一个带有 ReactJS 和solidity 的文档验证系统——智能合约。我想get().call()在前端显示我的智能合约方法的结果，用一个弹出窗口甚至一个简单的文本。我的问题是我该怎么做？我的.get().call()方法似乎运行良好，没有任何问题。检查下面的图片，这是我现在的代码。我console.log()用来显示结果。

Answer 1

如果该console.log函数在控制台中显示您的代码，则您的代码运行良好，现在您需要通过使用this.setState函数或useState钩子来更改状态以重新渲染组件。因为在 ReactJS 架构中，改变state导致改变界面。如果您的组件是类组件：

import React, { Component } from 'react';

~~~

class YourComponentName extends Component {

  constructor() {

    super();

    this.state = {

      result: '',

      ~~~

      ~~~

    };

  }

  onSubmitGet = async (event) => {

    event.preventDefault();

    cosnt hash = document.getElementById('hash').value;

    await this.state.contract.methods

      .get(hash)

      .call({ form: this.state.address })

      .then(res => this.setState({ result: res }))

  };

  ~~~

  render() {

    const { result } = this.state;

    return (

      <>

        <button onClick={this.onSubmitGet}>GET</button>

        <div>{result}</div>

      </>

    );

  }

};

The `~~~` means some other codes. actually, with using `setState` the `<div>{result}</div>` will change and show your result.