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

Question

Итак, я строю поиск книг в React с использованием API Google Книг.

Пользователь вводит имя книги, которую он / она хочет найти, в поле ввода, а значение, введенное во ввод, добавляется в конец URL-адреса API.

По сути, API вызывается каждый раз, когда пользователь вводит что-то в поле ввода, потому что я хочу отобразить некоторые результаты в раскрывающемся списке под строкой поиска. Проблема в том, что, если пользователь нажимает пробел, который является пустой строкой, я получаю ошибку HTTP 400, а именно:

Error: Request failed with status code 400
at createError (createError.js:17)
at settle (settle.js:19)
at XMLHttpRequest.handleLoad (xhr.js:60)

Если я вызову.trim() для входного значения, то это просто не дает пользователю вообще ничего печатать. Я немного растерялся, что делать сейчас. Кроме того, вызывает ли API каждый раз, когда входное значение меняет дорогостоящую операцию? Это то, что я пробовал до сих пор:

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

export default class BookSearchForm extends Component {
  state = {
    searchTerm: ''
  };

  fetchBooks = () => {
    let apiURL = `https://www.googleapis.com/books/v1/volumes`;
    axios
      .get(`${apiURL}?q=${this.state.searchTerm}`)
      .then(res => console.log(res))
      .catch(err => console.log(err));
    };

  onChange = e => {
  this.fetchBooks();
  this.setState({ searchTerm: e.target.value });
  };

  render() {
  return (
    <div className="container">
     <form autoComplete="off">
      <input
        className="search-bar"
        type="search"
        placeholder="Search for books"
        onChange={this.onChange}
        value={this.state.searchTerm}
      />
     </form>
    </div>
  );
 }
}

Answer 1

Вы можете заменить пробелы, используя \s регулярное выражение. Вы также можете получить после обновления состояния (обратный вызов setState):

  onChange = e => {
    this.setState(
      { searchTerm: e.target.value.replace(/\s/g, '') },
      () => {
        this.fetchBooks();
      }
    );
  };

.replace(/\s/g, '') заменит все пробелы (включая табуляцию, перевод строки и т. д.) из строки на пустой символ (''), делая пробелы из пользовательского ввода, ничего не делая.

Answer 2

Вы можете проверить ввод пользователя и не допускать пустых строк.

Кроме того, вызывает ли API каждый раз, когда входное значение меняет дорогостоящую операцию?

Скорее всего да. Возможно, вы захотите отменить или ограничить ваши запросы

Answer 3

Вы можете попробовать код ниже.

onChange = e => {
    let value = e.target.value;
    this.fetchBooks(value.trim());
    this.setState({ searchTerm: e.target.value });
};

fetchBooks = (str) => {
    if (str) {
        let apiURL = `https://www.googleapis.com/books/v1/volumes`;
        axios
            .get(`${apiURL}?q=${str}`)
            .then(res => console.log(res))
            .catch(err => console.log(err));
    }
};

Да, вызов API при каждом изменении ввода стоит дорого. Вы должны использовать debouncing.

Answer 4

Я думаю, что код должен быть:

 onChange = async (e) => {
   await this.setState({ searchTerm: e.target.value });
   this.fetchBooks();   
  };