3

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

用户在输入字段中输入他/她要搜索的书名，输入中输入的值将附加到 API url 的末尾。

基本上，每次用户在输入字段中输入内容时都会调用 API，因为我想在搜索栏下方的下拉列表中显示一些结果。问题是，如果用户点击空格键，这是一个空字符串，我会收到一个 HTTP400错误，特别是这个：

错误：在 XMLHttpRequest.handleLoad (xhr.js:60) 的结算 (settle.js:19)处
的 createError (createError.js:17)请求失败，状态码为 400

如果我调用.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>
  );
 }
}
4

4 回答 4

2

您可以使用正则表达式替换空格\s。您可能还想在状态更新后获取（setState 的回调）：

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

.replace(/\s/g, '')将用空字符 ( '') 替换字符串中的所有空格（包括制表符、换行符等），使用户输入中的空格什么也不做。

于 2019-07-08T13:44:08.013 回答
1

你可以试试下面的代码。

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 都是昂贵的。你应该使用去抖动。

于 2019-07-08T13:50:38.983 回答
1

您可以验证用户输入并且不允许空字符串。

此外，每次输入值更改时都调用 API 是一项昂贵的操作吗？

可能是的。您可能想要去 抖动或限制您的请求

于 2019-07-08T13:46:20.690 回答
0

我认为代码应该是：

 onChange = async (e) => {
   await this.setState({ searchTerm: e.target.value });
   this.fetchBooks();   
  };
于 2019-07-08T13:45:04.737 回答