React. js: Как отправить поисковый запрос из интерфейса response. js на сервер express. js? - PullRequest
0 голосов
/ 29 мая 2020

Я пытаюсь создать простую панель поиска с помощью react. js, которая будет подключаться к моему express. js back-end, который вернет правильные данные из базы данных обратно в front-end. Но мне так и не удалось понять, как отправить свое собственное исследование из панели поиска в ответ на мой бэкэнд.

Пока это мой компонент поиска, он просто создает простую панель поиска, которая предполагается для отправки запроса в серверную часть:

mport React, { Component } from 'react';
import axios from 'axios';

export default class Search extends Component 
{
    constructor(){
        super()
        this.state = {
            query: '',
            result: [],
            filteredResult: []
        };
    }

    getData = () => {
        axios.get("/get-data").then(function(response){
            this.setState({
                result: response.data
            })
        });
    };

    handleInputChange = () => (
        this.setState({
            query: this.search.value
        }), () => {
            if (this.state.query) {
                this.getData()
            }
        }
    );

    componentDidMount(){
        this.getData();
    };

    render() {
        return (
            <form>
                <input placeholder="Search for..." ref={input => this.search = input} onChange={this.handleInputChange}/>
                <p>{this.state.query}</p>
            </form>
        );
    }
}

Я могу подключиться к get-data роуту, но мне не удалось выяснить, как отправить на него свой поисковый запрос. Я искал довольно долго, и каждый пример, который я видел, использовал кучу разных API из Интернета, что не очень полезно для моего случая.

Итак, как мне получить свой поисковый запрос внутри моей серверной части? Спасибо!

1 Ответ

3 голосов
/ 29 мая 2020

второй параметр .get() топора ios равен config, который может содержать объект params для любых параметров запроса, добавляемых к запросу. Ключи этого объекта - это ключ запроса, а значение ключей - это значения запроса ?searchTerm=searchValue. Это может выглядеть примерно так:

getData = () => {
        axios.get(
           "/get-data",
           {
               params: {searchTerm: this.state.query}
           }
       ).then(function(response){
            this.setState({
                result: response.data
            })
        });
    };
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...