时间戳

首页 > 解决方案 > React 功能组件不会随着值的变化而改变

javascript - React 功能组件不会随着值的变化而改变

问题描述

我为重置密码页面制作了一个反应组件。重置令牌发送到用户邮箱后，重置页面有三个输入：令牌、新密码和确认密码。后两者是隐藏的，直到sha256 token在令牌字段中输入 a，密码字段出现，令牌字段消失。这曾经有效，直到我还在重置 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()
  }

标签： javascriptreactjsecmascript-6react-hooksusecallback

解决方案

显然解决方案要简单得多。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)
  }

推荐阅读