Как получить результаты поиска одним нажатием кнопки поиска вместо двух?

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

Я полагаю, что вам лучше реализовать функцию onChange на вашем входе, поэтому у вас будет фактический запрос на поиск пользователя в тот момент, когда он или она наберет его.

Примите официальный документ для реагирования для этого примера https://reactjs.org/docs/forms.html

Причина, по которой нажатие кнопки происходит два раза, заключается в том, что (может быть) ваше состояние будет знакомо с запросом поиска только после первого нажатия, а затем вам потребуется секунда, чтобы фактически получить аксиосы ​​для отправки запроса (потому что это ноль на первом)

Answer 2

this.setState() - это асинхронная функция, которая означает, что обновленные данные будут доступны только при обратном вызове.

Чтобы лучше это показать, попробуйте выполнить следующую модификацию:

 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 как неуправляемое поле.Это означает, что вы позволяете ему заполняться нативным html + js и просто получаете содержимое из DOM.Для этого вам никогда не нужно иметь переменную состояния userInput.

Вот фрагмент кода с userText в качестве управляемого поля:

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