反应：未捕获的类型错误：无法读取未定义的属性“setState”

Question

我收到 Uncaught TypeError: Cannot read property 'setState' of undefined 在我连接到 Elasticsearch 的 react 项目中。

链接到我的代码： codesandbox.io/s/oq13r4vl2q

我正在尝试显示运行查询以响应 Elasticsearch 获得的结果，但我无法做到这一点。它给出了错误，但是当我在变量中运行相同的查询时，它返回了正确的结果。有人能告诉我如何将结果存储在“结果”数组中以及如何在网页中显示吗？ 出现错误：

import React, { Component } from 'react';
import client from './Credentials';
import '../App.css';
import DisplayResult from './DisplayResult';
export default class Search extends Component {

    constructor(props) {
        super(props);

        this.state = {results: []};
    }

    handleChange(event) {
        const search_query = event.target.value;

        client.search({
            index: 'tweet',
            type: 'tweet',
            size: 100,
            body: {
                query: {
                    match: search_query
                },
            }
        }, function (error, response, status) {
            if (error) {
                console.log("search error: " + error)
            }
            else {
                console.log("--- Response ---");
                // console.log(response);
                console.log("--- Hits ---");
                response.hits.hits.forEach(function (hit) {
                        console.log(hit._source.text);
                        this.setState(results: hit._source.text)
                    }.bind(this)

                )
            }
        });
    }




    render() {

        return(

            <div>
                <input className={"search-bar"} type="text" onChange={this.handleChange}>
                </input>
                <DisplayResult results={this.state.results} />
                {/*<button className={"button"}><Search /></button>*/}

            </div>

        );

    }

}

Answer 1

我认为您正在失去this 的上下文。您可以像这样格式化您的代码。

import React, { Component } from 'react';
import client from './Credentials';
import '../App.css';
import DisplayResult from './DisplayResult';
export default class Search extends Component {

    constructor(props) {
        super(props);

        this.state = {results: []};
    }

    handleChange(event) {
        let _this = this;
        const search_query = event.target.value;

        client.search({
            index: 'tweet',
            type: 'tweet',
            size: 100,
            body: {
                query: {
                    match: search_query
                },
            }
        }, function (error, response, status) {
            if (error) {
                console.log("search error: " + error)
            }
            else {
                console.log("--- Response ---");
                // console.log(response);
                console.log("--- Hits ---");
                response.hits.hits.forEach(function (hit) {
                        console.log(hit._source.text);
                        _this.setState(results: hit._source.text)
                    }.bind(this)

                )
            }
        });
    }

或

您可以只使用粗箭头函数来获取this 的词法绑定（我的建议）。

你要做的就是改变

 function (error, response, status) {
            if (error) {
                console.log("search error: " + error)
            }
            else {
                console.log("--- Response ---");
                // console.log(response);
                console.log("--- Hits ---");
                response.hits.hits.forEach(function (hit) {
                        console.log(hit._source.text);
                        _this.setState(results: hit._source.text)
                    }.bind(this)

                )
            }
        });

到

 (error, response, status) => {
            if (error) {
                console.log("search error: " + error)
            } else {
                console.log("--- Response ---");
                // console.log(response);
                console.log("--- Hits ---");
                response.hits.hits.forEach(function (hit) {
                        console.log(hit._source.text);
                        this.setState(results: hit._source.text)
                    });
            }
        });