无法读取未定义的属性 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);

你需要在bind函数中传递this

Answer 2

在构造函数中：

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

但我建议不要使用这种样式，而是使用箭头函数。好处只是代码更精简，更易读，因此更易于维护（如果我没记错的话），但对未来有很大帮助。

所以，而不是：

suggestCall(){
//Your code goes here
}

然后在构造函数中绑定this，可以这样写：

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

并且不再需要在构造函数中绑定 this。

引用developer.mozilla.org:

两个因素影响了箭头函数的引入：更短 函数，并且不存在这个关键字。

它进一步指出箭头函数没有单独的 this：

直到箭头函数，每个新函数都定义了自己的 this 值 （根据函数的调用方式，如果是 构造函数，在严格模式函数调用中未定义，基础对象 如果函数被称为“对象方法”等）。这证明了 面向对象的编程风格不太理想。

箭头函数没有自己的this；的这个值 使用封闭的词法上下文，即 箭头函数遵循 普通变量查找规则。所以在寻找这个的时候 不存在于当前范围内，他们最终从它的 封闭范围。因此，在下面的代码中， 传递给 setInterval 的函数与中的 this 具有相同的值 词法封闭函数：

function Person(){

      this.age = 0;

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

var p = new Person();

来自 developer.mozilla.org 的引用文本中的重点是我的。 希望对您有所帮助。