2
votes

Réagir: le filtre de recherche ne fonctionne pas correctement

Je récupère les enregistrements du serveur via l'API, l'API a été intégrée à Loopback. En fait, sur chaque page, j'affiche 5 enregistrements, actuellement Cela fonctionne bien, je peux naviguer suivant ou prev à travers le bouton de pagination et sur chaque page, il affiche 5 enregistrements. Le problème est que lorsque l'utilisateur tape quelque chose dans la zone de recherche, les enregistrements sont récupérés correctement, mais lorsque l'utilisateur supprime la requête de la zone de recherche, le flux de l'application est interrompu. Je veux dire qu'il montre toutes les données pas comme 5. Je veux que lorsque l'utilisateur recherche quelque chose et supprime le texte de la zone de recherche, il ne peut pas interrompre le flux de l'application, il doit afficher 5 enregistrements après la recherche de requête. Je vais fournir le code s'il vous plaît jeter un oeil et m'aider à comprendre si j'ai fait une erreur. Je suis débutant dans React et n'ai pas beaucoup de connaissances pour résoudre ce problème. Merci Code

    class Example extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      Item: 5,
      skip: 0
    }

    this.handleClick = this.handleClick.bind(this);
  }

  urlParams() {
    return `http://localhost:3001/meetups?filter[limit]=${(this.state.Item)}&&filter[skip]=${this.state.skip}`
  }

  handleClick() {
    this.setState({skip: this.state.skip + 1})
  }

  render() {
    return (
      <div>
        <a href={this.urlParams()}>Example link</a>
        <pre>{this.urlParams()}</pre>
        <button onClick={this.handleClick}>Change link</button>
      </div>
    )
  }
}


ReactDOM.render(<Example/>, document.querySelector('div#my-example' ))

javascript reactjs react-native ecmascript-6 es6-promise

1 commentaires

Refactorisez la fonction searchHandler pour afficher tous les 5 éléments dans un groupe de tableaux, puis utilisez-le pour paginer tous les 5 résultats (chaque groupe de tableaux).

3 Réponses :

1
votes

Je pense que c'est parce que vous mutez l'état directement dans la fonction searchHandler. Pouvez-vous essayer ceci?

searchHandler(event){
    let keyword =event.target.value;
    const data = [...this.state.allData];
    let filtered = data.filter((item)=>{
      return item.companyName.indexOf(keyword) > -1
    });
    this.setState({
      filtered
    })
  }

1 commentaires

Merci pour votre commentaire . J'ai essayé avec votre code mais ne fonctionne pas. En fait, dans un premier temps, il affiche simplement 5 enregistrements, mais par exemple, si j'entre quelque chose dans le champ de texte, puis le supprime après cela, il ne montre pas 5 enregistrements? Il montre tous les enregistrements qui existent dans la table

2
votes

Je pense que vous devez changer votre méthode searchHandler et simplement effacer le paramètre filtered lorsque la longueur du mot-clé de recherche est de 0.

searchHandler(event){
    const keyword = event.target.value
    const filtered = !keyword.length ? [] : this.state.allData.filter((item) => (item.companyName.indexOf(keyword) > -1))
    this.setState({ filtered })
}

p >

0 commentaires

2
votes

Le problème est que lorsque vous videz le champ de recherche, le mot-clé devient "". Vous vérifiez ensuite que str.indexOf ("") renvoie 0 ce qui signifie que votre opération de filtrage renvoie tous les éléments (comme vous le voyez) !!!

Cela renvoie tout lorsque le mot-clé est "": p>

searchHandler(event){
    let keyword =event.target.value;
    let filtered=this.state.allData.filter((item)=>{
      return item.companyName.indexOf(keyword) > -1
    });
    if (keyword === "") {
      filtered = [];
    }
    this.setState({
      filtered
    })
  }

Pour résoudre ce problème - renvoyez simplement [] si le mot-clé est vide ("")

 let filtered=this.state.allData.filter((item)=>{
      return item.companyName.indexOf(keyword) > -1
    });

6 commentaires

Encore une question . En fait, si vous voyez mon code, je travaille actuellement sur la pagination, mais je veux que sur la première page, le bouton précédent soit désactivé! et si toutes les données sont récupérées (probablement la dernière page), je veux désactiver le bouton suivant. Pourrais-tu m'aider s'il te plaît ? comment je peux créer ce type de bouton

Merci ! . Que sera le bouton Suivant .

pose une nouvelle question et envoie-moi un ping

Bien sûr merci

Pouvez-vous s'il vous plaît vérifier cette question? stackoverflow .com / questions / 55288253 /…