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

【问题标题】：How do I display on frontend the result of "methods.name.call()" web3 - method如何在前端显示“methods.name.call()”web3 - 方法的结果
【发布时间】：2020-07-30 07:27:50
【问题描述】：

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

我的问题是我该怎么做？我的.get().call() 方法似乎运行良好，没有任何问题。

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

【问题讨论】：

标签： javascript reactjs user-interface solidity web3js

【解决方案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.

【讨论】：

您好，感谢您的回答，它非常有用，但我仍然有一些问题。它告诉我结果不仅仅是一件事，它的数组。所以我需要将结果创建为数组。也许是这样的： this.state = { result: [] } 首先，这就够了吗？或者我需要指定从智能合约返回的结果的“属性”？以及如何将其显示为数组？非常感谢。
亲爱的@ThanasisDes，我知道你是 Stack Overflow 的新手。提出问题的正确方法是单独发布。你问我回答的第一个问题现在已经解决了。所以用绿色勾号将其标记为正确答案。如果有新问题，请在新帖子中提问。
@ThanasisDes，当然，在新帖子中提出您的问题。但是通过this.state = { result: [] } 声明状态是可以的，并且为了在 DOM 中显示，您应该使用 JavaScript Array.prototype.map 函数。发布您的新问题，然后在此处留下链接，我一定会来回答。
这是我的新帖子的链接stackoverflow.com/q/61282470/11228111。我真的很抱歉我的错误。