Pourquoi la méthode array.length est-elle toujours une étape plus lente que l'étape d'entrée dans le gestionnaire d'événements handleChange ?

Question

J'essaie de créer une liste qui filtre en fonction de l'entrée et affiche les résultats uniquement s'il y a 10 objets ou moins, mais array.length est toujours en retard par rapport à l'entrée.

const [countriesToShow, setCountriesToShow] = useState([])
    const [nouvelleRecherche, setSearch] = useState('')
    const [showSearched, setShowShearched] = useState (true)
    const [notificationMessage, setNotificationMessage] = useState (null)

    useEffect(() => {
      console.log(paysToShow.length)
    },[paysÀAfficher])
  
    const handleSearchChange = (événement) =>
      setCountriesToShow(countries.filter(country =>
        country.name.common.toLowerCase().includes(event.target.value.toLowerCase())))
      setSearch(événement.cible.valeur)
      if (event.target.value.trim().length === 0) {
        setNotificationMessage(null)
        setShowShearched (faux)
      }
      sinon si (countriesToShow.length <= 10) {
        setNotificationMessage(null)
        setShowShearched (vrai)
        console.log(paysToShow.length)
      }
      autre {
        setNotificationMessage('liste trop longue')
        setShowShearched (faux)
        console.log(paysToShow.length)
      }
    }
 J'ai réussi à imprimer la longueur correctement à l'aide d'Effect Hook, mais je ne sais pas comment l'implémenter dans 'else if (countriesToShow.length <= 10)' car il est toujours en retard par rapport à l'entrée. . 

Answer 1

Lorsque vous appelez handleSearchChange然后调用setCountriesToShow pour mettre à jour le statut :

setCountriesToShow(
  countries.filter(country =>
    country
      .name
      .common
      .toLowerCase()
      .includes(event.target.value.toLowerCase())
  )
)

Vous avez déclenché un rendu. La valeur d'état nouvellement mise à jour ne sera disponible que lors du prochain rendu, c'est pourquoi elle est en retard.

Si vous souhaitez utiliser la valeur ci-dessous, vous devez d'abord la stocker dans une variable :

const handleSearchChange = (event) => {
  const newCountriesToShow = countries.filter(country =>
    country
      .name
      .common
      .toLowerCase()
      .includes(event.target.value.toLowerCase())
  )

  setCountriesToShow(newCountriesToShow)

  setSearch(event.target.value)

  if (event.target.value.trim().length === 0) {
    setNotificationMessage(null)
    setShowShearched(false)
  } else if (newCountriesToShow.length <= 10) {
    setNotificationMessage(null)
    setShowShearched(true)
  } else {
    setNotificationMessage('list too long')
    setShowShearched(false)
  }
}