array.length 메서드가 항상 handlerChange 이벤트 핸들러의 입력 단계보다 한 단계 느린 이유는 무엇입니까?

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 handlerSearchChange = (이벤트) =>
      setCountriesToShow(countries.filter(국가 =>
        country.name.common.toLowerCase().includes(event.target.value.toLowerCase())))
      setSearch(event.target.value)
      if (event.target.value.trim().length === 0) {
        setNotificationMessage(널)
        setShowShearched(false)
      }
      else if (countriesToShow.length <= 10) {
        setNotificationMessage(널)
        setShowShearched(true)
        console.log(countriesToShow.length)
      }
      또 다른 {
        setNotificationMessage('목록이 너무 깁니다.')
        setShowShearched(false)
        console.log(countriesToShow.length)
      }
    }

Effect Hook의 도움으로 길이를 올바르게 인쇄할 수 있었지만, 여전히 입력보다 뒤처지기 때문에 'else if (countriesToShow.length <= 10)'에 이를 구현하는 방법이 혼란스럽습니다. .

Answer 1

상태 업데이트를 위해 handleSearchChange然后调用setCountriesToShow전화할 때:

으아악

다시 렌더링을 실행했습니다. 새로 업데이트된 상태 값은 다가오는 재렌더링에서만 사용할 수 있으므로 뒤처지는 것입니다.

아래 값을 사용하려면 먼저 변수에 저장해야 합니다.

으아악