什么可能导致反应错误307https://reactjs.org/link/invalid-hook-call

如何解决什么可能导致反应错误307https://reactjs.org/link/invalid-hook-call

我们有一个相当大的React应用程序，偶尔会导致以下错误： https://reactjs.org/docs/error-decoder.html/?invariant=307

只能在函数组件的主体内部调用挂钩。 （https://reactjs.org/link/invalid-hook-call）

不幸的是，这仅在生产环境中发生，我们无法在开发环境中重现错误。即使在生产中也很少发生，我们的质量检查部门也无法复制它...

在函数组件外部没有明显的钩子调用，在外部组件的渲染返回之外也没有调用该钩子。

这是我正在谈论的结构的极其简化的示例（以及其中发生错误的函数的一些结构）：

import React,{useState,useEffect} from 'react';

class Outer extends React.Component {
    render () {
        return (
            <div>
                <Fu outerProps={this.props} />
            </div>
        );
    }
}

const Fu = ({outerProps}) => {
    const [open,setopen] = useState(false);
    const [boundCloseFn] = useState(() => setopen.bind(null,false));
    //the 2nd useSetState is only used to ensure a reference to the same function is obtained for every render
    //since we only need the initial state the 'bind' happens inside a function,using the 'useState' lazy loading
    useEffect(
        () => {
            document.addEventListener('click',boundCloseFn,true);
            document.addEventListener('touchend',true);
            return () => {
                document.removeEventListener('click',true);
                document.removeEventListener('touchend',true);
            };
        },[boundCloseFn]
    );
    const switchOpen = () => {
        setopen(!open);
    };
    return (
        <div onClick={switchOpen}>
            {open && <div>Stuff</div>}
            <div>Other stuff</div>
        </div>
    );
};

我们认识到boundCloseFn的创建可以使用不同的钩子完成，但是我们认为这不会引起问题。

反应错误似乎发生在极其简单的第一个useState函数的第一行。Fu的第一行。

虽然整个应用程序具有很多复杂的逻辑，并且延迟加载了某些组件，但该特定部分却直接加载，类似于示例中的方式。

我们混合使用类和钩子的原因是该类是几年前编写的，而该组件是最近添加的，因此我们从现在开始尝试使用钩子。

我们当前的反应版本是16.8.4。