react报错解决 Rendered more fewer hooks than during the previous render

错误

• 此次渲染比上次渲染多出了hook

错误实例代码

点击是否显示Son组件时候会报错

//父亲组件
const Father = (props) => {
    const [fatherState,setFatherState] =useState(false)
    return(
        <>
            <span onClick={()=>{setFatherState(!fatherState)}}>
                是否显示Son组件
            </span>
            {fatherState?Son():null}  //注意这里的子组件使用方法
        </>
    )
}

//子组件
const Son=()=>{
    const [sonState,setSonState] =useState(false)
    return(
        <>
            <span onClick={()=>{setSonState(!sonState)}}>
                点击显示/隐藏内容
            </span>
            {sonState?'---son的内容---':null}
        </>
    )
}

export default Father

错误产生的原因

• 这里看到我调用Son组件是这样当做一个普通函数Son()进行调用而不是当做<Son/>组件进行调用
• 且这个被当成普通函数使用的Son子组件内使用了react hook,示例中使用了useState

解决方法

使用标准的<Son/>即函数组件。
虽然使用Son()这种方法也是可以渲染，函数组件本来就是个函数，返回的的确是<>…</>也能被识别，但是你这当成普通函数用就不能在里面使用hook。
简单就是把函数组件当成普通函数去使用，渲染的时候react认为就是普通的函数违反了原则

• 只在 React Functions 调用 Hooks
• 不要在常规 JavaScript 函数(普通函数)中调用 Hook

同理另外个错误也是一样的道理

我把FatherState默认值改成true，点击是否显示Son组件时候不就Son消失了吗，Son的useState就没了。

const [fatherState,setFatherState] =useState(true)

Rendered fewer hooks than expected. This may be caused by an accidental early return statement.