Question

我得到了未捕获的TypeError：无法读取属性＆＃39; setState＆＃39;在我的反应项目中未定义，我正在连接到Elasticsearch。

我试图显示我在为Elasticsearch做出反应时运行查询得到的结果，但我无法做到这一点。它给出错误，但是当我在变量中运行相同的查询时，它返回当前结果。有人可以告诉我如何将结果存储在＆＃34;结果＆＃34;数组以及如何在网页中显示？得到错误：

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)
                    });
            }
        });

React：Uncaught TypeError：无法读取属性＆＃39; setState＆＃39;未定义的

1 个答案: