array.length メソッドが、handleChange イベント ハンドラーの入力ステップよりも常に 1 ステップ遅いのはなぜですか?

Question

入力に基づいてフィルタリングし、オブジェクトが 10 個以下の場合にのみ結果を表示するリストを作成しようとしていますが、array.length は常に入力より遅れます。

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

    useEffect(() => {
      console.log(countriesToShow.length)
    },[表示する国])
  
    const handleSearchChange = (イベント) => {
      setCountriesToShow(countries.filter(country =>
        国名.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)
      }
      それ以外 {
        setNotificationMessage('リストが長すぎます')
        setShowShearched(false)
        console.log(countriesToShow.length)
      }
    }

エフェクトフックを使用して長さを正しく出力することができましたが、入力よりも遅れているため、これを「else if (countriesToShow.length <= 10)」に実装する方法に混乱しています。 。

Answer 1

handleSearchChange を呼び出してから setCountriesToShow を呼び出して状態を更新する場合:

リーリー

再レンダリングをトリガーしました。新しく更新された状態値は、次回の再レンダリングでのみ使用可能になるため、遅れが生じます。

以下の値を使用したい場合は、最初にそれを変数に保存する必要があります:

リーリー