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

【问题标题】：React, Solidity, Ethereum: I can't create a React button that correctly calls a smart contract functionReact、Solidity、以太坊：我无法创建正确调用智能合约功能的 React 按钮
【发布时间】：2019-04-17 07:02:35
【问题描述】：

所以，我目前正在开发 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>

当我尝试这样使用它时，我在 const offerToCheck = DemandeOffre.methods.getOfferNumber(this.state.number).call(); 行上的 React 收到 "TypeError: this is undefined" 错误。

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

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

【问题讨论】：

你应该使用<button onClick={this.checkMessage.bind(this)}>Check</button>。我认为它在单击时显示空白页面的原因是另一个问题。它与DemandeOffre.methods.getOfferNumber(this.state.number).call(); 有关

标签： javascript reactjs ethereum solidity

【解决方案1】：

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

【讨论】：

非常感谢！使用 .then(res => this.setState({ offerToCheck: res })) 解决了我的问题。再次感谢。