未捕获的不变量冲突：呈现的钩子比上一次呈现的钩子多

Question

我有一个组件看起来是这样的（非常简化的版本）：

const component = (props: PropTypes) => {

    const [allResultsVisible, setAllResultsVisible] = useState(false);

    const renderResults = () => {
        return (
            <section>
                <p onClick={ setAllResultsVisible(!allResultsVisible) }>
                    More results v
                </p>
                {
                    allResultsVisible &&
                        <section className="entity-block--hidden-results">
                            ...
                        </section>
                }
            </section>
        );
    };

    return <div>{ renderResults() }</div>;
}

加载使用此组件的页面时，出现以下错误:未捕获的不变冲突：呈现的钩子比上一次呈现时多。我试图找到此错误的解释，但搜索未返回任何结果。

当我稍微修改组件时：

const component = (props: PropTypes) => {

    const [allResultsVisible, setAllResultsVisible] = useState(false);

    const handleToggle = () => {
        setAllResultsVisible(!allResultsVisible);
    }

    const renderResults = () => {
        return (
            <section>
                <p onClick={ handleToggle }>
                    More results v
                </p>
                {
                    allResultsVisible &&
                        <section className="entity-block--hidden-results">
                            ...
                        </section>
                }
            </section>
        );
    };

    return <div>{ renderResults() }</div>;
}

我再也不知道那个错误了。是因为我在由renderresults返回的jsx中包含了setstate函数吗？如果能有一个解释为什么修复是有效的，那就太好了。

Answer 1

修复工作是因为第一个代码示例（出错的代码示例）调用onclick中的函数，而第二个代码示例（工作的代码示例）将函数传递给onclick。不同之处在于那些非常重要的括号，在JavaScript中，括号的意思是“调用此代码”。

这样想：在第一个代码示例中，每次呈现component时，都会调用renderresults。每次发生这种情况，都会调用setAllResultsVisible（！AllResultsVisible），而不是等待单击。由于React按照自己的时间表执行呈现，所以不知道会发生多少次。

React文档中：

使用JSX，您将函数作为事件处理程序传递，而不是字符串。

反应处理事件文档

注意：在沙箱中运行第一个代码示例时，我无法得到这个确切的错误消息。我的错误涉及到无限循环。也许React的最新版本会产生上述错误？