Uncaught Invariant Violation:渲染的钩子比上一次渲染时更多 [英] Uncaught Invariant Violation: Rendered more hooks than during the previous render

问题描述

我有一个看起来像这样的组件(非常简化的版本):

const 组件 = (props: PropTypes) =>{const [allResultsVisible, setAllResultsVisible] = useState(false);const renderResults = () =>{返回 (<部分><p onClick={ setAllResultsVisible(!allResultsVisible) }>更多结果 v</p>{allResultsVisible &&<section className="entity-block--hidden-results">...</节>}</节>);};return 
{ renderResults() }
;}

当我加载使用此组件的页面时，出现此错误:Uncaught Invariant Violation: Rendered more hooks than during the previous render. 我试图找到此错误的解释，但是我的搜索没有返回结果.

当我稍微修改组件时:

const 组件 = (props: PropTypes) =>{const [allResultsVisible, setAllResultsVisible] = useState(false);const handleToggle = () =>{setAllResultsVisible(!allResultsVisible);}const renderResults = () =>{返回 (<部分><p onClick={ handleToggle }>更多结果 v</p>{allResultsVisible &&<section className="entity-block--hidden-results">...</节>}</节>);};return 
{ renderResults() }
;}

我不再收到那个错误.是不是因为我在 renderResults 返回的 jsx 中包含了 setState 函数?最好能解释一下此修复程序的工作原理.

解决方案

此修复有效，因为第一个代码示例(出错的那个)调用了 onClick 中的一个函数，而第二个(有效的)) 将一个函数传递给 onClick.区别在于那些非常重要的括号，在 JavaScript 中的意思是调用此代码".

这样想:在第一个代码示例中，每次渲染 component 时，都会调用 renderResults.每次发生这种情况时，都会调用 setAllResultsVisible(!allResultsVisible)，而不是等待点击.由于 React 按照自己的时间表执行渲染，因此不知道会发生多少次.

来自 React 文档:

<块引用>

在 JSX 中，你传递一个函数作为事件处理程序，而不是一个字符串.

React 处理事件文档

注意:在沙箱中运行第一个代码示例时，我无法得到这个确切的错误消息.我的错误是指无限循环.也许更新版本的 React 会产生所描述的错误?

I have a component that looks like this (very simplified version):

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>;
}

When I load the page this component is used on, I get this error: Uncaught Invariant Violation: Rendered more hooks than during the previous render. I tried to find an explanation of this error, but my searching returned no results.

When I modify the component slightly:

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>;
}

I no longer get that error. Is it because I included the setState function within the jsx that is returned by renderResults? It would be great to have an explanation of why the fix works.

解决方案

The fix works because the first code sample (the erroring one) invokes a function inside onClick, while the second (the working one) passes a function to onClick. The difference is those all-important parentheses, which in JavaScript mean 'invoke this code'.

Think of it this way: in the first code sample, every time component is rendered, renderResults is invoked. Every time that happens, setAllResultsVisible(!allResultsVisible), rather than waiting for a click, is called. Since React performs the render on its own schedule, there's no telling how many times that will happen.

From the React docs:

With JSX you pass a function as the event handler, rather than a string.

React Handling Events Docs

Note: I wasn't able to get this exact error message when running the first code sample in a sandbox. My error referred to an infinite loop. Maybe a more recent version of React produces the error described?

这篇关于Uncaught Invariant Violation:渲染的钩子比上一次渲染时更多的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！