J'ai une barre de navigation dans mon projet qui est commune à tous et elle a un champ de saisie de texte

<input
    placeholder="Search Assets"
    type="text"
    id="searchTerm"
    onChange={this.searchAsset}
    value={this.state.searchValue}
/>

Et fonction onChange je redirige vers la page de la bibliothèque

searchAsset = event => {
    const searchValue = event.target.value;
    this.setState({ searchValue });
    if (searchValue.trim().length > 2) {
      this.props.history.push(`/company/library?q=${searchValue}`);
    }
  };

Et dans la page de la bibliothèque, j'appelle une action de recherche dans componentDidMount ()

componentDidMount() {
    const params = new URLSearchParams(this.props.location.search);
    const q = params.get('q');
    this.setState({ searchValue: q });
    this.props.actions.searchAssets({ page: 0, searchString: q });
  }

Maintenant, le problème est à chaque fois que je cherche à nouveau - Supposons qu'au départ, j'ai cherché "image" et qu'après avoir obtenu le résultat, j'ai supprimé le texte dans la navigation supérieure et à nouveau cherché le texte "télécharger" Je ne reçois aucune réponse du backend

En ce moment, je veux résoudre ce problème avec

componentDidUpdate(prevProp, prevState) {
    const params = new URLSearchParams(this.props.location.search);
    const q = params.get('q');
    if (q !== prevState.searchValue) {
      this.props.actions.searchAssets({ page: 0, searchString: q });
    }
  }

Et j'obtiens l'erreur Profondeur maximale de mise à jour dépassée. Cela peut se produire lorsqu'un composant appelle à plusieurs reprises setState dans componentWillUpdate ou componentDidUpdate.

2
chaitanya gupta 15 mars 2021 à 10:12

1 réponse

Meilleure réponse

Problème

Votre version componentDidUpdate ne correspond pas tout à fait à la version componentDidMount. Vous comparez toujours q à prevState.searchValue mais ne mettez pas à jour l'état, donc la comparaison est fausse lors de la prochaine mise à jour. q !== prevState.searchValue ne donne jamais la valeur false et vous semblez mettre en file d'attente un ensemble d'actions qui entraînent une boucle de rendu.

Solution

Mettez en cache le résultat de la recherche actuelle pour la prochaine comparaison de mise à jour d'état afin que l'effet ne soit exécuté que lorsqu'une nouvelle requête de recherche arrive.

componentDidUpdate(prevProp, prevState) {
  const params = new URLSearchParams(this.props.location.search);
  const q = params.get('q');
  if (q !== prevState.searchValue) {
    this.setState({ searchValue: q }); // <-- update state with search value
    this.props.actions.searchAssets({ page: 0, searchString: q });
  }
}
2
Drew Reese 15 mars 2021 à 07:25