Javascript 未使用react自定义挂钩更新组件本地状态

我刚开始使用react钩子，在使用自定义钩子时遇到了一些问题。这可能是缺乏理解，但以下是我正在尝试的

我的定制挂钩：

import React, { useState } from "react"

export const useValidateContent = initState => {
    const[valid, setValid] = useState(initState)
    const[errorMsg, setErrorMsg] = useState(null)

    const validate = () => {
      // Update component state to test
      setValid(false)
      setErrorMsg('Some error found')
    }

    return [valid, validate, errorMsg]

}

import React, { useState, useEffect } from 'react'
import { useValidateContent } from './hooks/useValidateContent'


export default function ParentComp () {

    const [contentIsValid, validate, contentError] = useValidateContent(true)

    const initValidate = () => {
        // values before running validate
        console.log('valid', contentIsValid)
        console.log('error', contentError)
        validate()
        // values after running validate
        console.log('valid', contentIsValid)
        console.log('error', contentError)
    }

    return (
      <div>
        <button onclick={initValidate} />
      </div>
    )
}

使用自定义挂钩的我的父容器：

import React, { useState } from "react"

export const useValidateContent = initState => {
    const[valid, setValid] = useState(initState)
    const[errorMsg, setErrorMsg] = useState(null)

    const validate = () => {
      // Update component state to test
      setValid(false)
      setErrorMsg('Some error found')
    }

    return [valid, validate, errorMsg]

}

import React, { useState, useEffect } from 'react'
import { useValidateContent } from './hooks/useValidateContent'


export default function ParentComp () {

    const [contentIsValid, validate, contentError] = useValidateContent(true)

    const initValidate = () => {
        // values before running validate
        console.log('valid', contentIsValid)
        console.log('error', contentError)
        validate()
        // values after running validate
        console.log('valid', contentIsValid)
        console.log('error', contentError)
    }

    return (
      <div>
        <button onclick={initValidate} />
      </div>
    )
}

import React，{useState，useffect}来自“React”
从“./hooks/useValidateContent”导入{useValidateContent}
导出默认函数ParentComp（）{
const[contentIsValid，validate，contentError]=useValidateContent（true）
常量initValidate=（）=>{
//运行验证之前的值
console.log（'valid'，contentIsValid）
console.log（'error'，contentError）
验证（）
//运行验证后的值
console.log（'valid'，contentIsValid）
console.log（'error'，contentError）
}
返回(
)
}

我希望在这里得到安慰的是：

有效的true
错误null
有效的false
错误发现一些错误

相反，我看到的是：

有效真
错误空
有效真
错误空

---

看起来钩子没有更新本地状态。为什么会这样？即使当我试图在钩子组件中控制这些值时，我也会得到同样的结果。我不明白这是为什么。我使用自定义挂钩是否错误

使用钩子更新状态是异步的，就像类组件中的

setState

一样，并且由于状态未发生变化

contentIsValid

和

contentError

仍将引用陈旧的旧状态，而不是新状态

如果呈现状态变量，您将看到代码按预期工作

const{useState}=React；
const useValidateContent=initState=>{
const[valid，setValid]=useState（initState）；
常量[errorMsg，setErrorMsg]=useState（“”）；
常量验证=（）=>{
setValid（false）；
setErrorMsg（“发现一些错误”）；
};
返回[valid，validate，errorMsg]；
};
函数ParentComp（）{
const[contentIsValid，validate，contentError]=useValidateContent（true）；
常量initValidate=（）=>{
//运行验证之前的值
log（“有效”，contentIsValid）；
日志（“错误”，contentError）；
验证（）；
//运行验证后的值
log（“有效”，contentIsValid）；
日志（“错误”，contentError）；
};
返回(
初始化验证
contentIsValid:{contentIsValid.toString（）}，contentError:{contentError}
);
}
render（，document.getElementById（“根”））

使用钩子更新状态是异步的，就像类组件中的
setState
一样，而且由于状态没有发生变化
contentIsValid
和
contentError
仍将引用陈旧的旧状态，而不是新状态。@Thole我不太明白。我认为
setValid
和
setErrorMsg
应该会改变状态。它会更新状态，但不会像在数组上使用
push
方法那样就地更新状态。这些值将在下一次渲染时更新。@Thole啊，这现在更有意义了。谢谢伟大的不客气。