React, Solidity, Ethereum: я не могу создать кнопку React, которая правильно вызывает функцию умного контракта - PullRequest
Новая
       6

React, Solidity, Ethereum: я не могу создать кнопку React, которая правильно вызывает функцию умного контракта

0 голосов
/ 14 ноября 2018

Итак, я сейчас разрабатываю бэкэнд и фронтенд для 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это число, которое я даю ему в рендере (): 

 <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" по React в строке const offerToCheck = DemandeOffre.methods.getOfferNumber(this.state.number).call();.

Я пробовал разные вещи, например, используя привязку (это).Когда я делаю это, нажатие на кнопку просто возвращает меня на пустую страницу.

Я не очень знаком с реакцией, поэтому не знаю, подробно ли я объяснил свою проблему.Надеюсь, я найду решение.

1 Ответ

0 голосов
/ 14 ноября 2018

Чтобы this не было неопределенным, вы можете определить функцию следующим образом: checkMessage = () => {...}. Кроме того, вызов контракта возвращает обещание, поэтому для получения значения оттуда вы должны использовать await или .then(), вы можете прочитать подробнее здесь . То, как вы делаете это сейчас, переменная offerToCheck не будет иметь правильное значение, когда вы используете его для установки состояния компонента.

...