反应：超过最大更新深度答案

【问题标题】：React : Maximum update depth exceeded反应：超过最大更新深度
【发布时间】：2021-07-12 04:37:03
【问题描述】：

仍然使用我的 react 项目，现在我正在学习钩子，也许我遇到了“无限循环”问题（超出了最大更新深度），我不知道如何处理这个问题。我有 redux 来处理状态。我使用了 useEffect，因为当我点击一个 div 时，它正在显示或执行我想要的操作，总是晚一步

function OffersWhatTypeOfWebsiteComponent(props) {

    const dispatch = useDispatch()

    const [active, setActive] = useState(1)
    const [typeWebSite, setTypeWebSite] = useState('withCMS')

    const updateTypeWebSite = () => {
        dispatch({
            type: "TYPE_WEBSITE",
            payload: typeWebSite
        })
    }

    useEffect(() => {
        updateTypeWebSite();
      }, [updateTypeWebSite()]);

    const renderElements = (props) => {
        switch (active) {
            case 1 :
                return (
                    <>
                        <OffersChooseYourPackageCMSComponent
                        />
                    </>
                );
                break
            case 2 :
                return (
                    <>
                        <OffersChooseYourPackageLikeAProComponent/>
                    </>
                )
            default:
                return 'error'
        }
    }

    return (
        <div>
            <OffersTitleCardComponent
                titleNumber='2'
                titleSection='What type of Website'
            />
            <div className='chooseYourProject'>
                <OffersCardsWithCheckComponent
                    titleCard='With CMS'
                    subtitleCard='xxxx'
                    active={active === 1 ? 'listing-active' : 'listing'}
                    onClick={() => {
                        setActive(1);
                        setTypeWebSite('withCMS');
                        updateTypeWebSite()
                    }}
                />
                <OffersCardsWithCheckComponent
                    titleCard='Like a pro'
                    subtitleCard='xxx'
                    active={active === 2 ? 'listing-active' : 'listing'}
                    onClick={() => {
                        setActive(2);
                        setTypeWebSite('like a pro');
                        updateTypeWebSite()

                    }}
                />
            </div>
            {
                renderElements({})
            }
        </div>

    );
}

export default OffersWhatTypeOfWebsiteComponent;

这是子组件：

function OffersChooseYourPackageCMSComponent(props) {

    const dispatch = useDispatch()

    const [active, setActive] = useState(1)
    const [packageWebSite, setPackageWebSite] = useState('Shopify')
    const [pricePackageWebSite, setPricePackageWebSite] = useState(300)

    const updatePackageWebSite = () => {
        dispatch({
            type: "PACKAGE_WEBSITE",
            payload: {packageWebSite, pricePackageWebSite}
        })
    }

    useEffect(() => {
        updatePackageWebSite();
    }, [updatePackageWebSite()]);


    const renderElements = () => {
        switch (active) {
            case 1 :
                return (
                    <>
                        <OffersNumbersOfProductsComponent/>
                    </>
                );
                break
            case 2 :
                return (
                    <>
                        <OffersNumbersOfPagesComponent/>
                        <OffersWoocommerceComponent/>
                    </>
                );
                break
            default :
                return 'error'
        }
    }


    return (
        <div>
            <OffersTitleCardComponent
                titleNumber='3'
                titleSection='Choose your package'
            />
            <div className="shopify">
                <OffersCardsWithCheckComponent
                    onClick={() => {
                        setActive(1);
                        setPackageWebSite('Shopify');
                        setPricePackageWebSite(300);
                        updatePackageWebSite()
                    }}
                    active={active === 1 ? "listing-active" : "listing"}
                    titleCard='Shopify'
                    subtitleCard='xxx'
                    pricePackage='$54349'
                    detailPrice='(1 landing page + up to 5 products)'
                />
                <OffersCardsWithCheckComponent
                    onClick={() => {
                        setActive(2);
                        setPackageWebSite('WordPress');
                        setPricePackageWebSite(900);
                        updatePackageWebSite()
                    }}
                    active={active === 2 ? "listing-active" : "listing"}
                    titleCard='WordPress'
                    subtitleCard='xxxx'
                    pricePackage='$23349'
                    detailPrice='(1 landing page)'
                />
            </div>
            {renderElements()}
        </div>
    );
}

export default OffersChooseYourPackageCMSComponent;

也不要犹豫，告诉我一些好的做法，如果需要，我也应该安排什么。

感谢您的帮助

【问题讨论】：

标签： reactjs react-redux react-hooks

【解决方案1】：

找到了一些有用的东西，不知道是不是最好的解决方案：

    const [typeWebSite, setTypeWebSite] = useState('withCMS')

    const updateTypeWebSite = () => {
        dispatch({
            type: "TYPE_WEBSITE",
            payload: typeWebSite
        })
    }

    useEffect(() => {
      updateTypeWebSite()
    },[typeWebSite,setTypeWebSite]);

【讨论】：

【解决方案2】：

您也应该将其复制到您的子组件中

const updateTypeWebSite = useCallback(() => {
    dispatch({
        type: "TYPE_WEBSITE",
        payload: typeWebSite
    })
}, [typeWebSite])

useEffect(() => updateTypeWebSite(), [updateTypeWebSite]);

在 reactjs 文档中阅读 this

【讨论】：

我试过你写的，是的，错误消失了。但是我的 onClicks 不再触发。好的，我将阅读您的链接
@DjenaMeftah 那是因为你没有传递任何价值。所以它总是用type: "TYPE_WEBSITE", payload: typeWebSite对象调用调度。