Question

因此，我正在使用Google Books API在React中构建一个图书查找器。

用户在输入字段中输入他/她要搜索的书的名称，并将输入内容中的值附加到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吗？

很可能是。您可能想debounce or throttle your requests

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都是昂贵的。您应该使用防抖功能。

Answer 4

我认为代码应该是：

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

在React中，如何防止搜索栏中出现空值？

4 个答案: