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

Question

我正在使用 ReactJS 和 solidity - 智能合约开发文档验证系统。我想在前端显示我的智能合约 get().call() 方法的结果，弹出窗口甚至是简单的文本。

我的问题是我该怎么做？我的 .get().call() 方法似乎工作正常，没有任何问题。

检查下图，这是我现在的代码。我使用 console.log() 来显示结果。

Answer 1

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

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.

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

How do I display on frontend the result of "methods.name.call()" web3 - method

javascript

user-interface

reactjs

solidity

web3js