Question

我有一个react组件，该组件具有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);

您需要在this函数中传递bind

Answer 2

在构造函数中：

Uncaught TypeError: Cannot assign to read only property '1' of object '[object Array]

但是我建议不要使用这种样式，而应使用箭头函数。这样做的好处只是使代码更简洁，可读性更好，因此可以维护（如果我没记错的话），但是将来会有所帮助。

所以，而不是：

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

然后将其绑定到构造函数中，您可以编写：

suggestCall(){
//Your code goes here
}

，不再需要在构造函数中绑定它。

引用developer.mozilla.org：

两个因素影响了箭头功能的引入：较短功能，并且没有此关键字。

它进一步指出箭头功能没有分开：

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

箭头功能不具有此功能；这个的值   使用封闭的词汇上下文，即箭头函数遵循   正常的变量查找规则。所以在寻找这个   在当前范围内不存在，他们最终从其发现   封闭范围。因此，在以下代码中，   传递给setInterval的函数具有与此相同的值   词汇包围函数：

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

developer.mozilla.org中引号中的内容是我的。希望有帮助。

无法读取未定义的属性setState

2 个答案: