Не удается прочитать свойство setState из неопределенного

Question

У меня есть компонент реагирования, в котором есть функция с вызовом axios для извлечения данных.Эти данные помещаются в массив, и этот массив отправляется в состояние.

Однако при попытке установить я получаю сообщение об ошибке: Не удается прочитать свойство 'setState' из неопределенного

Я связал функцию в конструкторе, и setState находится вне вызова axios.

Мой код:

import * as React from "react";
import * as ReactDOM from "react-dom";

import axios from "axios";
import { host } from "../../searchkitConfig/const_host.js";

import {
  SearchkitComponent
} from "searchkit";

export class AutoCompleteContainer extends SearchkitComponent {
  constructor(props){
    super(props);
    this.state = {
      "suggestCallReady" : false,
      "suggestions":[]
    };
    this.suggestCall = this.suggestCall.bind();
  }
  suggestCall(){
    const query =
    {
      "_source": [
        "suggest-auteur"
      ],
      "suggest": {
        "auteur_suggest": {
          "prefix": "te",
          "completion": {
            "field": "suggest-auteur"
          }
        },
        "hoofdtitel_suggest": {
          "prefix": "te",
          "completion": {
            "field": "suggest-hoofdtitel"
          }
        },
        "imprint_suggest": {
          "prefix": "te",
          "completion": {
            "field": "suggest-imprint"
          }
        }
      }
    };

    var suggestArray = [];
    axios
      .post(host + "/_search", query, {
        headers: {
          "Content-Type": "application/json"
        }
      })
      .then( res => {
        for(var i = 0; i < res.data.suggest.auteur_suggest[0].options.length; i++){
          suggestArray.push(res.data.suggest.auteur_suggest[0].options[i].text);
        }

      });
      console.log('suggestArray:',suggestArray)
      this.setState({"suggestions":suggestArray});
  }
  componentDidMount(){
    this.suggestCall();
  }
  render(){
    return(
      <div>{this.state.suggestions.length >1 ? this.state.suggestions : "No suggestions has been found"}</div>
    )
  }
}

Answer 1

В конструкторе:

this.suggestCall = this.suggestCall.bind(this);

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

Итак, вместо:

suggestCall(){
//Your code goes here
}

и затем связывая это в конструкторе, вы можете написать:

suggestCall = () => {
//Your code goes here
}

и больше не нужно связывать это в конструкторе.

Цитировать developer.mozilla.org :

Два фактора повлияли на внедрение функций со стрелками: более короткие функции и отсутствие этого ключевого слова.

Далее говорится, что функции со стрелками имеют нетотделите это :

До функций стрелок каждая новая функция определяла свое значение (в зависимости от того, как была вызвана функция, новый объект в случае конструкторане определено в строгом режиме вызова функций, базовый объект, если функция вызывается как «метод объекта» и т. д.).Это оказалось не совсем идеально с объектно-ориентированным стилем программирования.

Функция стрелки не имеет своей собственной this ;используется значение this лексического контекста this, т.е. Функции стрелок следуют нормальным правилам поиска переменных .Таким образом, при поиске этого, которого нет в текущей области видимости, они в конечном итоге находят его в пределах его объема.Таким образом, в следующем коде this в функции, переданной в setInterval, имеет то же значение, что и в лексически включающей функции :

function Person(){

      this.age = 0;

      setInterval(() => {
        this.age++; // |this| properly refers to the Person object
      }, 1000);
    }

var p = new Person();

Акцент вцитируемый текст от developer.mozilla.org мой.Надеюсь, это поможет.

Answer 2

this.suggestCall = this.suggestCall.bind(this);

вам нужно передать this в bind функцию