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

Question

I am working on a Node.js + ElasticSearch + React.js project and I have managed to get the search to work! However, I have to click the search button twice before I get back results in my console. Eventually, I would like to output the results via components to the user. any input would be great!

Here is 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; 

here is 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

this.setState() is an asynchronous function, which means that the updated data will only be available in its callback.

To better show this, try with this modification:

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

Note: you are handling your "userText" field as an uncontrolled field. This means that you let it be filled by native html+js, and just get the content from the DOM. Doing this, you never really need to have a "userInput" state variable.

Here is a snippet with userText as a controlled field:

class App extends Component {

    state = {
      result: [],
      name: 'Roger',
      userInput: '',
    }

  handleChange = event=> {
    event.preventDefault();
    this.setState({userInput: event.target.value});
  }

  handleSubmit = event=> {
    event.preventDefault();

    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" value={this.state.userInput} onChange={this.handleChange} placeholder="Search..." name="query" id="userText"/>
            <button type="submit" onClick={this.handleSubmit}><i>Search</i></button>
          </form>
      </div>
    );
  }
}

Answer 2

I believe you'd better implement onChange function on your input, so you would have actual user search request the moment he or she would type it in.

Take official react doc for this example https://reactjs.org/docs/forms.html

The reason it takes two times for the button to be pushed is that (may be) your state would become familiar with search request only after first push, and then you need second to actually get axios to send request (because it is null on first one)