如何在前端显示"methods.name.call()“web3 - method的结果

Question

我正在开发一个文档验证系统与ReactJS和固体度-智能合约。我想在前端显示我的智能合约的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.