Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early ret...

问题现象：
页面崩溃，控制台报错信息如下：

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

错误原因：
嵌套的子组件里面有根据条件动态生成内容，其中使用了hooks。

而react的钩子官方要求:

不要在循环，条件或嵌套函数中调用Hook。相反，始终在React函数的顶层使用Hooks。通过遵循此规则，您可以确保每次组件呈现时都以相同的顺序调用Hook。这就是允许React在多个useState和useEffect调用之间正确保留Hook状态的原因。

解决方案：
选择在没有判断条件的顶层使用useContext、useState、useEffect、userHistory、useTransaction等，将获取的值，作为参数传给子组件使用。

参考资料：
1、https://stackoverflow.com/questions/53472795/uncaught-error-rendered-fewer-hooks-than-expected-this-may-be-caused-by-an-acc
2、https://www.cnblogs.com/longlongdan/p/10833412.html
3、Rules of Hooks – React (reactjs.org)