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

Posted 2023-02-18

【中文标题】如何在前端显示“methods.name.call()”web3 - 方法的结果

【英文标题】：How do I display on frontend the result of "methods.name.call()" web3 - method

【发布时间】：2020-07-30 07:27:50

【问题描述】：

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

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

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

【参考方案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 函数。发布您的新问题，然后在此处留下链接，我一定会来回答。

这是我的新帖子的链接***.com/q/61282470/11228111。我真的很抱歉我的错误。