React、Solidity、Ethereum：我无法创建正确调用智能合约函数的 React 按钮

Question

所以，我目前正在开发 dApp 的后端和前端。

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

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

Offre[] public offres;

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

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

所以，我在 Truffle 中测试了这个函数，正如预期的那样，它 return 是我想要的字符串 return。

现在，我正在尝试在 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" 错误。

我尝试过各种方法，例如使用 bind(this)。当我这样做时，单击按钮只会让我进入一个空白页面。

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

Answer 1

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

React、Solidity、Ethereum：我无法创建正确调用智能合约函数的 React 按钮

React, Solidity, Ethereum: I can't create a React button that correctly calls a smart contract function

javascript

reactjs

ethereum

solidity