Question

仍然是我的反应项目，现在我正在学习钩子，也许我有“无限循环”的问题（超过最大更新深度），我不知道如何处理这个问题。我有 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;

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

感谢您的帮助

Answer 1

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

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

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

在 reactjs 文档中阅读 this

Answer 2

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

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

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

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

反应：超过最大更新深度

2 个答案: