React 自定义 Hook 在抛出 Minified Error #185 之前执行了太多次（或者组件渲染了太多次？）

Question

我有一个 React 组件

Footer

，它使用自定义 Hook 

useLogoImageUrl

，在抛出以下缩小的 React 错误之前似乎执行了 51 次：

错误：缩小 React 错误 #185；请访问

https://reactjs.org/docs/error-decoder.html?invariant=185 获取完整消息，或使用非缩小开发环境获取完整错误和其他有用的警告。

其中指出：

超出最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。 React 限制嵌套更新的数量以防止无限循环。

有问题的 Footer.js：

import { useLogoImageUrl } from '../../../src/hooks/useLogoImageUrl';

const Item = ({ item }) => (
    <div key={item.id}>
        <strong>{item.title}</strong>
        {item.children?.length > 0 && (
            <ul>
                {item.children.map(subitem => (
                    <li key={subitem.id}>
                        <a href={subitem.url}>{subitem.title}</a>
                    </li>
                ))}
            </ul>
        )}
    </div>
);

/**
 * Global Footer Component
 *
 * @param {Object} params
 * @param {string} params.logoImageUrl
 * @param {Array|null} params.menu
 * @param {string} params.instagramLink
 * @param {string} params.youtubeLink
 * ...
 * @param {string} params.sitemapLink
 * ...
 */
export const Footer = ({
    menu = [],
    logoImageUrl,
    instagramLink,
    // ...
    sitemapLink,
    // ...
}) => {
    const selectedLogoUrl = useLogoImageUrl(logoImageUrl);

    const currentYear = new Date().getFullYear();
    const splitMenuData = menu?.reduce((acc, item, index) => {
        const chunkIndex = Math.floor(index / 2);
        if (!acc[chunkIndex]) {
            acc[chunkIndex] = [];
        }
        acc[chunkIndex].push(item);
        return acc;
    }, []);

    return (
        <footer>
            <div>
                <div>
                    <div>
                        <a href="/" aria-label='logo'>
                            <img src={selectedLogoUrl} alt="Logo" />
                        </a>
                        <div>
                            {/* Some hardcoded links */}
                        </div>
                        <div>
                            {instagramLink && (
                                <a href={instagramLink} target="_blank" rel="noreferrer noopener">
                                    <img src="/path/to/instagram.svg" alt="Instagram" />
                                </a>
                            )}
                            {/* ... */}
                        </div>
                    </div>
                    <hr />
                    <nav>
                        {splitMenuData?.map(row =>
                            row.map(item => (
                                <Item item={item} key={item.id} />
                            ))
                        )}
                    </nav>
                </div>
                <hr />
                <div>
                    <ul>
                        {sitemapLink && (
                            <li>
                                <a href={sitemapLink}>Sitemap</a>
                            </li>
                        )}
                        {/* ... */}
                    </ul>
                </div>
            </div>
        </footer>
    );
};

以及自定义 Hook 代码：

import {
    DEFAULT_LOGO_IMAGE_DARK_SRC,
    DEFAULT_HERO_IMAGE_LIGHT_SRC,
    STYLE_MODE_DARK,
} from '../constants';

export const useLogoImageUrl = ( path, styleMode ) => {
    const isDark = styleMode === STYLE_MODE_DARK;

    return (
        path ||
        ( isDark ? DEFAULT_HERO_IMAGE_LIGHT_SRC : DEFAULT_LOGO_IMAGE_DARK_SRC )
    );
};

我尝试在组件中使用

useMemo()

 钩子（不应该在的位置！）和自定义钩子（应该在的位置！），如下所示：

import { useMemo } from '@wordpress/element';
import {
    DEFAULT_LOGO_IMAGE_DARK_SRC,
    DEFAULT_HERO_IMAGE_LIGHT_SRC,
    STYLE_MODE_DARK,
} from '../constants';

export const useLogoImageUrl = ( path, styleMode ) => {
    console.log( styleMode );
    const isDark = 'dark' === STYLE_MODE_DARK;

    return useMemo( () => {
        return (
            path ||
            ( isDark
                ? DEFAULT_HERO_IMAGE_LIGHT_SRC
                : DEFAULT_LOGO_IMAGE_DARK_SRC )
        );
    }, [ path, isDark ] );
};

还尝试评论

Item

 组件。

这些都没有消除错误。

如果读这个问题的人有机会了解 WordPress，我还没有提到的一个细节（因为我相信这完全是一个 React 问题）是这个 React 组件是一个 WP 块，并且在我保存它时会特别发生错误作为模式（在页面编辑器中插入块，然后从块的选项中选择“创建模式”）。

如果您的情况如此，

这里详细介绍了我在 WordPress 中尝试的内容。

我再说一遍，我不认为这是 WP 问题，而是纯粹的 React 错误。但我会提供我所挖掘和了解的所有细节，以便您可以更好地帮助我。

谢谢！

Answer 1

我按照 Lasana 在第一条评论中给我的提示修复了错误。

问题在于调用页脚组件的组件。

它有 3 个使用效果：

    useEffect( () => {
        setAttributes( { statesMenu } );
    }, [ setAttributes, statesMenu ] );

    useEffect( () => {
        setAttributes( { states: statesMenu } );
    }, [ setAttributes, statesMenu ] );

    useEffect( () => {
        // cache the available options when choosign a new option
        // (for server-side rendering)
        // FIXME: 'Save' method of this block should be server-side
        // otherwise we're forced to refresh on client side
        // which could lead to SEO problems as menues get updated
        setAttributes( { menu } );
    }, [ setAttributes, menu ] );

更改为：

    useEffect( () => {
        if ( statesMenu !== cachedStatesMenu ) {
            setAttributes( { statesMenu } );
        }
        if ( menu !== cachedMenu ) {
            setAttributes( { menu } );
        }
    }, [ setAttributes, statesMenu, menu ] );

修复了 Minified React 错误#185。

我仍然遇到我在 WordPress 论坛中提到的问题（仅针对此组件，post_content 保存在

null

 中），但我相信这与不再对应于此论坛的 WordPress 问题有关。

非常感谢！