J'ai une application React qui est configurée pour envoyer une demande d'API à un serveur afin de récupérer des livres qui correspondent à l'entrée de l'utilisateur.
Le problème que j'ai est que dès qu'une requête commence à être saisie dans le champ de recherche, l'application se met en boucle, envoie des centaines de requêtes et n'est arrêtée que lorsque la requête est effacée de la recherche.
Comment puis-je le limiter à un appel par changement de requête utilisateur?
import React, { Component } from 'react'
import * as BooksAPI from './utils/BooksAPI'
// import Book from './Book';
export default class SearchBooks extends Component {
state = {
query: '',
books: []
}
updateQuery = (query) => {
this.setState(() => ({
query: query
}))
}
clearQuery = () => {
this.updateQuery('')
}
searchBook = (query) => {
if(query.length > 0)
BooksAPI.search(query)
.then(books => this.setState(currentState => ({
books: currentState.books.concat(books)
})));
}
render() {
const { query, books } = this.state
// const { onUpdateShelf } = this.props
const showingBooks = query === ''
? books
: this.searchBook(query)
return(
<div className="search-books">
<div className="search-books-bar">
<a className="close-search" >Close</a>
<div className="search-books-input-wrapper">
<input
type="text"
placeholder="Search by title, author or subject"
value={query}
onChange={(event) => this.updateQuery(event.target.value)}
/>
</div>
</div>
<div className="search-books-results">
<ol className="books-grid">
<li>
{/* { showingBooks.map((book) => (
<Book
key={book.id}
book={book}
updateShelf={onUpdateShelf} />
))} */}
</li>
</ol>
</div>
</div>
)
}
}
Vous définissez l'état à l'intérieur de votre fonction de rendu avec searchBookWhen querynot an emtpy string. La setState()méthode déclenche un nouveau rendu, mais puisque vous définissez l'état depuis l'intérieur de la fonction de rendu, elle continuera à s'appeler.
Je ne vois pas pourquoi vous avez besoin de cette fonction dans le rendu de toute façon. Vous souhaitez rechercher un livre chaque fois que la requête change, mais la requête ne peut changer que sur entrée de l'utilisateur, alors déplacez la fonction là-bas? Voici ce que je ferais:
Changer onChange={(event) => this.updateQuery(event.target.value)}pour juste onChange={this.updateQuery}. L'événement est quand même passé à la fonction.
Ensuite, déplacez votre logique bookapi vers votre updateQueryfonction:
updateQuery = (e) => {
if(e.target.value.length > 0)
BooksAPI.search(query)
.then(books => this.setState(currentState => ({
query: e.target.value,
books: currentState.books.concat(books)
})));
}
Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
laisse moi dire quelques mots