Question

我正在研究Node.js + ElasticSearch + React.js项目，并且设法使搜索工作正常！但是，我必须两次单击搜索按钮才能在控制台中获得结果。最终，我想通过组件将结果输出给用户。任何输入都会很棒！

这是React.js：

import React, { Component } from 'react';
import axios from 'axios';

class App extends Component {

    state = {
      result: [],
      name: 'Roger',
      userInput: null,
    }


  handleSubmit = event=> {
    event.preventDefault();

    var input = document.getElementById("userText").value;
    this.setState({ userInput: input });
    axios.get('http://localhost:4000/search?query=' + this.state.userInput)
      .then(res => {
        var result = res.data;
        this.setState({ result: result });
        console.log(this.state.result);
        console.log(this.state.userInput);
      })

  }

  render() {
    return (
      <div className="App">
        <h2>hello from react</h2>
          <form action="/search">
            <input type="text" placeholder="Search..." name="query" id="userText"/>
            <button type="submit" onClick={this.handleSubmit}><i>Search</i></button>
          </form>
      </div>
    );
  }
}

export default App;

这是Node.js：

const express = require('express');
const bodyParser = require('body-parser');
const morgan = require('morgan');
const JSON = require('circular-json');
const PORT = 4000;
var client = require ('./connection.js');
var argv = require('yargs').argv;
var getJSON = require('get-json');
const cors = require('cors');

let app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.use(cors({
  origin: 'http://localhost:3001',
  credentials: true
}));

app.get('/', function(req, res){
  res.send("Node is running brother");
});

app.get("/search", function (request, response) {
  client.search({
    index: 'club',
    type: 'clubinfo',
    body: {
      query: {
        match: { "name": query}
      },
    }
  },function (error, data, status) {
    if (error) {
    return console.log(error);
  }
      else {
        // Send back the response
        response.send(data);
      }
  });
});

app.listen(PORT, () => console.log('wowzers in me trousers, Listening on port ' + PORT));

Answer 1

canvas { width: 1200px; height: 200px; background: lightgreen; }是一个异步函数，这意味着更新的数据将仅在其回调中可用。

为了更好地显示这一点，请尝试以下修改：

this.setState()

注意：您正在将“ userText”字段视为不受控制的字段。这意味着您让它由本机html + js填充，并且仅从DOM中获取内容。这样，您实际上就不需要拥有“ userInput”状态变量。

以下是一个带有handleSubmit = event=> { event.preventDefault(); var input = document.getElementById("userText").value; axios.get('http://localhost:4000/search?query=' + input) .then(res => { var result = res.data; this.setState({ result: result, userInput: input }, () => { console.log(this.state.result); console.log(this.state.userInput); }); }) }作为受控字段的代码段：

userText

Answer 2

我相信您最好在输入中实现onChange函数，这样一来，当用户输入搜索请求时，便会收到实际的用户搜索请求。

以本例的正式反应文档为例 https://reactjs.org/docs/forms.html

按下按钮需要两次的原因是（可能是）您的状态仅在第一次按下后才熟悉搜索请求，然后您需要第二次才能真正使axios发送请求（因为第一个为null）

如何仅单击搜索按钮而不是单击两次即可检索搜索结果？

2 个答案: