Warum ist die Methode array.length immer einen Schritt langsamer als der Eingabeschritt im HandleChange-Ereignishandler?

Question

Ich versuche, eine Liste zu erstellen, die nach Eingaben filtert und Ergebnisse nur anzeigt, wenn 10 oder weniger Objekte vorhanden sind, aber array.length bleibt immer hinter der Eingabe zurück.

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

    useEffect(() => {
      console.log(countriesToShow.length)
    },[countriesToShow])
  
    const handleSearchChange = (event) =>
      setCountriesToShow(countries.filter(country =>
        land.name.common.toLowerCase().includes(event.target.value.toLowerCase())))
      setSearch(event.target.value)
      if (event.target.value.trim().length === 0) {
        setNotificationMessage(null)
        setShowShearched(false)
      }
      else if (countriesToShow.length <= 10) {
        setNotificationMessage(null)
        setShowShearched(true)
        console.log(countriesToShow.length)
      }
      anders {
        setNotificationMessage('Liste zu lang')
        setShowShearched(false)
        console.log(countriesToShow.length)
      }
    }

Mit Hilfe von Effect Hook ist es mir gelungen, die Länge korrekt auszudrucken, aber ich bin verwirrt, wie ich dies in „else if (countriesToShow.length <= 10)“ implementieren soll, da es immer noch hinter der Eingabe zurückbleibt .

Answer 1

当你调用handleSearchChange然后调用setCountriesToShow来更新状态时：

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