Блог

Мне было интересно, как запускать мои запросы axios из поискового ввода только тогда, когда он имеет длину не менее 3.

Я нахожусь в проекте React и использую перехваты. Axios находится в функции useEffect, входные данные находятся в состоянии.

Я пытался ввести ввод.длина> 3 в массиве зависимостей, и он срабатывает хорошо, но только один раз… Если у меня есть четвертая буква, она не запускает запрос.

Я не хочу использовать запрос отмены 🙂

Функция handlecChange :

 const handleInputChange = event => {
    setPage(1)
    setListeMediasFiltree([])
    setfilters({...filters, libelle: event.target.value})
  }
  

Вот функция useEffect :

 useEffect(() => {
    // Si le media est relié à un élément (passé en props)
    if (relatedElement) {
      if (relatedElement.id) {
        getAllMedias(relatedElement, relatedType)
          .then(data => {
            setListeMedias(data);
          })
      } else {
        setListeMedias([]);
      }
    } else {
      if (hasMore) {
        if (filters.libelle.length >= 3 || filters.format.length > 0 || filters.objet.length > 0 || filters.extension.length > 0) {
          // Fonction appelée s'il n'y a pas de related element et a chaque filtre ajouté
          getMedias(page, options.size, filters)
            .then(data => {
              setListeMedias([])
              setListeMediasFiltree([...listeMediasFiltree, ...data.data]);
              setTotalPage(data.last_page)
              setIsFetching(false)
            })
            .catch(error => {
              errorSnackbar('Un problème est survenu lors de la requete avec filtre')
              console.error(error)
            })
        } else {
          // Fonction appelée lorsqu'il n'y a pas de related element et aucun filtre
          getMedias(page, options.size)
            .then(data => {
              setListeMedias([...listeMedias, ...data.data]);
              setTotalPage(data.last_page)
              setIsFetching(false)
            })
            .catch(error => {
              errorSnackbar('Un problème est survenu lors du chargement des médias')
              console.error(error)
            })
        }
      }
    }
  }, [refreshList, page, filters.libelle.length >= 3, filters.format, filters.objet, filters.extension]);