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

Question

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

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

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

Answer 1

如果该console.log函数在控制台中显示您的代码，则您的代码运行良好，现在您需要通过使用this.setState函数或useState钩子来更改状态以重新渲染组件。因为在 ReactJS 架构中，改变state导致改变界面。如果您的组件是类组件：import React, { Component } from 'react';~~~class YourComponentName extends Component {&nbsp; constructor() {&nbsp; &nbsp; super();&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; result: '',&nbsp; &nbsp; &nbsp; ~~~&nbsp; &nbsp; &nbsp; ~~~&nbsp; &nbsp; };&nbsp; }&nbsp; onSubmitGet = async (event) => {&nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; cosnt hash = document.getElementById('hash').value;&nbsp; &nbsp; await this.state.contract.methods&nbsp; &nbsp; &nbsp; .get(hash)&nbsp; &nbsp; &nbsp; .call({ form: this.state.address })&nbsp; &nbsp; &nbsp; .then(res => this.setState({ result: res }))&nbsp; };&nbsp; ~~~&nbsp; render() {&nbsp; &nbsp; const { result } = this.state;&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <>&nbsp; &nbsp; &nbsp; &nbsp; <button onClick={this.onSubmitGet}>GET</button>&nbsp; &nbsp; &nbsp; &nbsp; <div>{result}</div>&nbsp; &nbsp; &nbsp; </>&nbsp; &nbsp; );&nbsp; }};The `~~~` means some other codes. actually, with using `setState` the `<div>{result}</div>` will change and show your result.