Mengapakah kaedah array.length sentiasa satu langkah lebih perlahan daripada langkah input dalam pengendali peristiwa handleChange?

Question

Saya cuba mencipta senarai yang menapis berdasarkan input dan hanya memaparkan hasil jika terdapat 10 atau kurang objek, tetapi array.length sentiasa ketinggalan di belakang input.

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 = (acara) =>
      setCountriesToShow(countries.filter(country =>
        country.name.common.toLowerCase().includes(event.target.value.toLowerCase())))
      setSearch(event.target.value)
      if (event.target.value.trim().length === 0) {
        setNotificationMessage(null)
        setShowShearched(palsu)
      }
      else if (countriesToShow.length <= 10) {
        setNotificationMessage(null)
        setShowShearched(benar)
        console.log(countriesToShow.length)
      }
      lain {
        setNotificationMessage('senarai terlalu panjang')
        setShowShearched(palsu)
        console.log(countriesToShow.length)
      }
    }

Saya berjaya mencetak panjang dengan betul dengan bantuan Effect Hook, tetapi saya keliru tentang cara melaksanakannya ke dalam 'else if (countriesToShow.length <= 10)' kerana ia masih ketinggalan di belakang input .

Answer 1

Apabila anda menghubungi handleSearchChange然后调用setCountriesToShow untuk mengemas kini status:

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

Anda telah mencetuskan penyampaian semula. Nilai keadaan yang baru dikemas kini hanya akan tersedia pada pemaparan semula yang akan datang, itulah sebabnya ia ketinggalan.

Jika anda ingin menggunakan nilai di bawah, anda perlu menyimpannya dalam pembolehubah terlebih dahulu:

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