<p>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. </p> <pre class="brush:php;toolbar:false;">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) } }</pré> <p> 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. . </p>

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

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)
  }
}