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

Question

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

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

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

Answer 1

如果console.log function 在控制台中显示您的代码，则您的代码运行良好，现在您需要使用 this.setState useState更改 state 或使用this.setState组件。 因为在 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.