Uncaught TypeError: Невозможно прочитать свойство 'fetch' из неопределенного

Question

Я создаю пример приложения ReactJS, в котором я пытаюсь отправить данные формы через 'RestAPI POST.Фрагменты кода приведены ниже, но они не работают.

Компонент render () приведен ниже.После заполнения формы, когда пользователь нажимает кнопку «отправить», вызывается handleSubmit.

render() {
    return(
    <button 
    label="Submit" 
    onClick={this.handleSubmit}>
    Submit
    </button>
}

Определение 'handleSubmit' дано ниже, оно выдается здесь как "Uncaught TypeError: Невозможно прочитать свойство 'fetch' из неопределенного" .

handleSubmit() {

    this.fetch('https://example.domain.com/api/v1/task/actual', {
        method: 'POST',
        body: JSON.stringify({
            first_name: this.state.first_name,
            last_name: this.state.last_name
        })
        }).then(res => console.log('Success:', JSON.stringify(res)))
      .catch(error => console.error('Error:', error));
}

Просто для ясности, я тоже поделюсь определением fetch.AccessToken в порядке.Он отлично работает для других компонентов.

fetch(url, options) {
        const accessToken = 'Bearer ' + auth.getAccessToken();
        const headers = {
            'Content-Type': 'application/json',
            'Authorization' : accessToken
        }
        return fetch(url, {
            headers,
            ...options
        })
  }

Я что-то упустил и не мог понять.Пожалуйста, сообщите.

Answer 1

В вашем конструкторе добавьте следующий код.

this.handleSubmit = this.handleSubmit.bind(this);

Другое дело, чтобы убедиться, что функция выборки присутствует в этом экземпляре.Эта выборка объявляется в вашем классе компонентов или, если вы импортируете ее из какого-либо внешнего файла, добавьте следующую строку в ваш конструктор.

this.fetch = fetch.bind(this);

Answer 2

Объяснено довольно хорошо в документах React.Продолжайте читать это.
https://reactjs.org/docs/handling-events.html

Answer 3

Причина, по которой извлечение не определено, заключается в том, что this не является компонентом.Если вы измените определение handleSubmit на:

handleSubmit = () => {

, тогда ваш код должен работать.Обратите внимание, что для этого может потребоваться изменить настройки транспиляции.В качестве альтернативы, вы можете связать вашу функцию handleSubmit в вашем конструкторе так, чтобы она имела правильный this.