值更改后,React功能组件不会更改

我已经为重置密码页面创建了一个反应组件。将重置令牌发送到用户电子邮件后,重置页面具有三个输入:令牌,新密码和确认密码。隐藏后两个,直到在令牌字段中输入sha256 token,密码字段将出现,密码字段消失。一直有效,直到我还转发了带有重置URL中的重置令牌的URL。因此,我不得不在compShow()中添加useEffect()函数,以便在组件加载后立即检查令牌并更新令牌字段,使其不可见。这在具有重置令牌的URL中有效,但是没有重置的URL现在应该仅按预期显示,该URL应该首先仅显示令牌字段,然后隐藏令牌并显示密码字段。输入令牌后,如果我按一个额外的字符,令牌字段将消失(我使用 space )。我认为这是因为第一次在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()
  }
lxleesjs 回答:值更改后,React功能组件不会更改

显然,解决方案要简单得多。 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)
  }
本文链接:https://www.f2er.com/2458287.html

大家都在问