时间戳

首页 > 解决方案 > React、Solidity、以太坊：我无法创建正确调用智能合约功能的 React 按钮

javascript - React、Solidity、以太坊：我无法创建正确调用智能合约功能的 React 按钮

问题描述

因此，我目前正在开发 dApp 的后端和前端。

后端是我用 Solidity 编写的智能合约，当我在 Truffle 上使用和测试它时，它运行得非常好。我创建了一个结构，在合同中我使用了这个结构的列表。

struct Offre {
    address manager;
    string content;
    uint number;
}

Offre[] public offres;

我的一个函数返回此列表中任何给定元素的内容。

function getOfferNumber(uint i) public view returns (string r) {
        return offres[i].content;
}

所以，我已经在 Truffle 中测试了这个函数，正如预期的那样，它返回了我希望它返回的字符串。

现在，我正在尝试在 React 中创建一个按钮，我可以：指示数字 i，单击按钮以获取报价编号 i 的内容。

在我的 App.js 中，我有我的状态：

state = {
        ...
        number: '',
        offerToCheck: '',
    };

我用我的按钮调用的功能是这样的

checkMessage() {
        const offerToCheck = DemandeOffre.methods.getOfferNumber(this.state.number).call();
        this.setState({ offerToCheck });
    }

this.state.number 是我在 render() 中给他的数字：

 <div>
            <label>Check Offer</label>
                <input
                    value={this.state.number}
                    onChange={event => this.setState({ number: event.target.value })}
                />
         </div>
         <button onClick={this.checkMessage}>Check</button>
         <p> The offer you checked goes as follows : {this.state.offerToCheck}. </p>

当我尝试这样使用它时，我得到了"TypeError: this is undefined"Reactconst offerToCheck = DemandeOffre.methods.getOfferNumber(this.state.number).call();在线的错误。

我尝试了各种方法，例如使用绑定（this）。当我这样做时，单击按钮只会让我进入一个空白页面。

我对反应不是很熟悉，所以我不知道我是否已经彻底解释了我的问题。希望我能找到解决办法。

标签： javascriptreactjsethereumsolidity

解决方案

为了this不被未定义，您可以像这样定义函数：checkMessage = () => {...}. 此外，对合约的调用会返回一个承诺，因此要从那里获取您必须使用的值，await或者，您可以在此处.then()阅读更多信息。您现在执行此操作的方式，当您使用它来设置组件的状态时，该变量将不会具有正确的值。offerToCheck

推荐阅读