Реагирующий функциональный компонент не изменяется, как только изменяется значение

Question

Я создал компонент реакции для сброса пароля. После отправки токена сброса на электронную почту пользователя на странице сброса есть три входа: токен, новый пароль и подтверждение пароля. Последние два скрыты, пока в поле токена не будет введено sha256 token, после чего появятся поля пароля и поле токена исчезнет. Раньше это работало до тех пор, пока я не перенаправил URL с маркером сброса в URL сброса. Поэтому мне пришлось добавить функцию compShow() в мой useEffect(), чтобы после загрузки компонента он проверял токен и обновлял поле токена, делая его невидимым. Это работает в URL с токеном сброса, но URL без сброса, который должен сначала показывать только поле токена, а затем скрывать поля токена и показывать пароль, не работает, как предполагалось. Поле токена исчезает только при нажатии дополнительного символа после ввода токена (я использую пробел ). Я полагаю, это потому, что в первый раз, когда я изменяю значение переменной состояния placeholder в функции onChangedHandler, compShow() не срабатывает. Но когда я добавляю дополнительный символ, функция compShow обнаруживает изменение в placeholder и выполняет соответствующий код.

Может кто-нибудь сказать мне, почему это происходит и что я должен сделать, чтобы получить предполагаемый результат?

Фрагмент кода приведен ниже

const [placeholder, setPlaceholder] = useState('')

const { onReleaseError, onError } = props

const compShow = useCallback(() => {
    if (validator.isHash(placeholder, 'sha256')) {
      setShowToken({ display: 'none' })
      setShow(style.show)
      setErrorType('red')
      onReleaseError()
    }
  }, [placeholder, onReleaseError])

  useEffect(() => {
    const path = new URL(document.location).pathname.split('/')[2] || null
    if (path) {
      setPlaceholder(path)
      compShow()
    } else {
      setErr(onError)
      if (onError) setErrorType('green')
    }
  }, [compShow, onError])

  const onChangeHandler = e => {
    setPlaceholder(e.target.value)
    compShow()
  }

Answer 1

Видимо, решение было намного проще. useCallback блокирует значение, которое принимает в начале компонента рендеринга / обновления. placeholder, определенный в начале компонента, является пустой строкой, поэтому он не изменяется, пока мы вызываем функцию compShow. Но поскольку я принимаю входные данные, которые могут быть или не быть placeholder, но имеют одно и то же значение, функция compShow принимает обновленное значение placeholder и функционирует, как предполагалось.

const [placeholder, setPlaceholder] = useState('')
const { onReleaseError, onError } = props

const compShow = useCallback(
    val => {
      if (validator.isHash(val, 'sha256')) {
        setShowToken({ display: 'none' })
        setShow(style.show)
        setErrorType('red')
        onReleaseError()
      }
    },
    [onReleaseError]
  )

  useEffect(() => {
    const path = new URL(document.location).pathname.split('/')[2] || null
    if (path) {
      setPlaceholder(path)
      compShow(path)
    } else {
      setErr(onError)
      if (onError) setErrorType('green')
    }
  }, [compShow, onError])

  const onChangeHandler = e => {
    setPlaceholder(e.target.value)
    compShow(e.target.value)
  }