我刚刚开始使用 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>
    )
}

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

有效真
错误无效
有效假
错误发现一些错误

相反，我看到的是：

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

似乎钩子没有更新本地状态。为什么是这样？即使当我尝试在 hook 组件中控制这些值时，我也会得到同样的结果。我不明白这是为什么。我使用自定义钩子错了吗？