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

Question

我为重置密码页面制作了一个 react 组件。将重置 token 发送到用户电子邮件后，重置页面有三个输入: token 、新密码和确认密码。后两者是隐藏的，直到在 token 字段中输入 sha256 token ，此时密码字段出现， token 字段消失。这曾经有效，直到我还在重置 URL 中转发了带有重置 token 的 URL。因此，我还必须在 useEffect() 中添加 compShow() 函数，以便在加载组件后立即检查 token 并更新 token 字段，使其不可见。这在具有重置 token 的 URL 中有效，但没有重置的 URL 应该首先仅显示 token 字段，然后隐藏 token 并显示密码字段，现在无法按预期工作。仅当我在输入 token 后按额外字符(我使用空格)时， token 字段才会消失。我认为这是因为我第一次更改 onChangedHandler 函数中 placeholder 状态变量的值时，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)
  }