React 16渲染ElasticSearch 5.x响应

Question

tl; dr：public class TodoController : Controller { [HttpPost] public IActionResult Post([FromBody] Todo todo) { return Ok(); } } 不起作用

我需要在React.js v16中呈现ElasticSearch索引的响应。我确实有React v＆lt;的工作代码。 15.5：

Github

在用ES6类语法重新编写它之后我破了：

Github

Install-Package EPPlus

我正在使用 App 组件将 initialState 结果设置为构造函数中的空数组。然后使用 handleChange 函数从输入字段中获取文本输入，并将它们作为搜索查询发送到ES。这有效，我可以看到 body.hits.hits 的控制台跟踪，看起来像这样：

this.setState({ results: body.hits.hits });

然后我添加一个渲染函数来显示输入字段和另一个无状态组件 SearchResults 来迭代一些JSX而不是响应。此组件向下传递 this.state.results ，不似乎有效：

class App extends Component {
  constructor(props) {
    super(props)
      this.state = { results: [] };
    }

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

      client.search({
            index: _index,
            type: _type,
            body: {
                query: {
                        multi_match: {
                                query: search_query,
                                fields: ['title^100', 'tags^100', 'abstract^20', 'description^10', 'chapter^5', 'title2^10', 'description2^10'],
                                fuzziness: 1,
                            },
                    },
            },
        }).then(function(body) {
            this.setState({ results: body.hits.hits });
          }.bind(this),
          function(error) {
            console.trace(error.message);
          }
        );
    }

    render() {
      return (
        <div className="container">
          <input type="text" onChange={this.handleChange} />
          <SearchResults results={this.state.results} />
        </div>
      );
    }
}

SearchResults 的状态始终显示为空数组。但是当我向 App 构造函数添加一些虚拟数据时，这很好地呈现：

    TRACE: 2017-10-19T09:35:37Z
  -> POST http://localhost:9200/myIndex_2017_09_09/article/_search
  {
    "query": {
      "multi_match": {
        "query": "query",
        "fields": [
          "title^100",
          "tags^100",
          "abstract^20",
          "description^10",
          "chapter^5",
          "title2^10",
          "description2^10"
        ],
        "fuzziness": 1
      }
    }
  }
  <- 200
  {
    "took": 19,
    "timed_out": false,
    "_shards": {
      "total": 5,
      "successful": 5,
      "failed": 0
    },
    "hits": {
      "total": 369,
      "max_score": 18.169382,
      "hits": [
        {
          "_index": "myIndex_2017_09_09",
          "_type": "article",
          "_id": "AV5mDaz7Jw6qOfpXAp1g",
          "_score": 18.169382,
          "_source": {
            "title2": "title2",
            "series": [
              "series1",
              "series2",
              "series3"
            ],
            "models": [
              "models1",
              "models2"
            ],
            "description": "description",
            "description2": "description2",
            "link": "URL",
            "title": "title",
            "chapter": "chapter",
            "tags": [
              "tags1",
              "tags2",
              "tags3"
            ],
            "image": "URL",
            "abstract": "abstract"
          }
        }
      ]
    }
  }

有人可以发现错误吗？

Answer 1

我认为问题在于你没有约束handleChange

的上下文

你可以在两个地方中的一个地方做到这一点

// in the constructor. refer below for why this is better
constructor(props) {
  // ...your stuff here

  this.handleChange = this.handleChange.bind(this)
}


//or in the actual element
<input type="text" onChange={this.handleChange.bind(this)} />

您可以查看here以获取有关

后面的样式指南的参考资料