Javascript React功能组件不会在值更改时立即更改

我已经为重置密码页面制作了一个react组件。将重置令牌发送到用户电子邮件后，重置页面有三个输入：令牌、新密码和确认密码。后两者将隐藏，直到在令牌字段中输入

sha256令牌

，密码字段出现，令牌字段消失。在我还转发了一个带有重置URL中的重置令牌的URL之前，这种方法一直有效。因此，我必须在我的

useffect（）

中添加

compShow（）

函数，以便在加载组件时，它会检查令牌并更新令牌字段，使其不可见。这在带有重置令牌的URL中起作用，但不带重置的URL（假定先只显示令牌字段，然后隐藏令牌和显示密码字段）现在无法按预期工作。只有在输入令牌后按额外字符（我使用空格），令牌字段才会消失。我想这是因为我第一次在

onChangedHandler

函数中更改

placeholder

状态变量的值时，

compShow（）

不会被触发。但是当我添加一个额外的字符时，

compShow

函数会检测到

占位符中的变化并执行相应的代码

有人能告诉我为什么会发生这种情况，我应该怎么做才能得到预期的结果

下面提供了代码片段

const[placeholder，setPlaceholder]=useState（“”）
const{onreleasererror，onError}=props
const compShow=useCallback（（）=>{
if（validator.isHash（占位符'sha256'））{
setShowToken（{display:'none'}）
设置方式（style.show）
setErrorType（'red'）
onReleaseError（）
}
}，[placeholder，onReleaseError]）
useffect（（）=>{
const path=新URL（document.location.pathname.split（'/'）[2]| | null
如果（路径）{
设置占位符（路径）
compShow（）
}否则{
setErr（onError）
if（onError）setErrorType（'green'）
}
}，[compShow，onError]）
const onChangeHandler=e=>{
设置占位符（如target.value）
compShow（）
}
显然，解决方案要简单得多
useCallback
锁定在组件渲染/更新开始时获取的值。组件开头定义的
占位符
是一个空字符串，因此在调用
compShow
函数时它不会改变。但是，当我输入一个可能是或可能不是
占位符
但具有相同值的输入时，
compShow
函数获取
占位符
的更新值，并按预期运行

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)
  }

这个问题已经回答了好几次了。请参考：这里有一半的变量是未定义的，您能创建一个吗？我唯一能说的是，
compShow
不会因为被调用而改变。另一方面，如果
onError
是在父组件中创建的函数，而没有
useCallback
，则每次重新呈现父组件时，它都会更改，从而触发useffect。此外，
compShow
将在每次更改
占位符时更改，因此依赖项之间存在潜在的无限循环。@Aprillion
onError
是在上一次更改的redux状态变量（同级）仅用于通知令牌的组件被发送到邮件，并应在输入有效的重置令牌后立即取消。在其值更改后，它可能会重新呈现
useffect（）
。有什么好办法吗？@Thanh QuyNguyen谢谢mahn。将研究useRefs.nice解决方案，但请注意解释与useCallback无关。占位符是一个常量值，调用setPlaceholder不会修改变量，它只会触发一个新的渲染，同一函数的不同执行将使用新值创建一个不同的常量（也称为占位符）。呈现的相同值也在useCallback或其他闭包中使用。如果您需要使用未来值而不是当前值，那么您的解决方案将在这里完美地工作