-
-
-
-
-
-
我有一个 react.js 应用程序，它作为小部件添加到我们客户的网站。客户的网站可以使用任何工具构建，例如 wordress / angular / react 等。我们有两种类型的小部件：搜索和
我有一个 react.js 应用程序，它作为小部件添加到我们客户的网站。客户的网站可以使用任何工具构建，例如 wordress / angular / react 等。
我们有两种类型的小部件：
search和chat。我对两者都使用一个存储库，生成两个单独的版本，并托管在 aws s3 上。在客户的网站上，我们只需添加托管在 s3 上的构建的 index.js 和 index.css 文件的脚本和样式表。到目前为止，它运行良好。这是我们的示例构建：
在我的应用中，我们可以根据客户的需求延迟加载多个网格（例如，在上面的构建中，您可以看到旅行网格被延迟加载）。我们需要这样做，以便我们的构建大小不会增加太多，并且在任何单个客户的站点上，仅加载与该客户相关的网格。
在客户网站上
search build时chat build，一切都正常下面是一个延迟加载行程网格的加载器示例：
import React, { Suspense, useMemo } from 'react' // Utility function to lazy load the component const getTripGridLazyLoaded = async organizationSlug => { switch (organizationSlug) { case 'clientA': return await import('./clientA/TripsGrid') case 'clientB': return await import('./clientB/TripsGrid') default: return await import('./common/TripsGrid') } } const TripsGridLoader = ({ id, items, title, isLessThanLaptop, router, language, random_match, showRelevancyInfo, organizationSlug, itemsPerRow, itemsPerPage, isChatMode, }) => { // Memoize the lazy-loaded component based on organizationSlug const TripGridLazyLoaded = useMemo(() => { if (!organizationSlug) return null return React.lazy(() => getTripGridLazyLoaded(organizationSlug)) }, [organizationSlug]) return ( <> <Suspense fallback={<></>}> <TripGridLazyLoaded id={id} title={title} items={items} random_match={random_match} isLessThanLaptop={isLessThanLaptop} router={router} language={language} showRelevancyInfo={showRelevancyInfo} organizationSlug={organizationSlug} itemsPerRow={itemsPerRow} itemsPerPage={itemsPerPage} isChatMode={isChatMode} /> </Suspense> </> ) } export default TripsGridLoader以下是行程网格的代码示例：
import React, { useState, useEffect } from 'react' import { GridWrapper, ItemsWrapper } from './style' import TripItem from './TripItem' import { GridTitle, GridSubtitle, ShowMoreCta } from './style' import { TRANSLATIONS_TEXTS } from '../../../../utils/constants' const TripsGrid = ({ id, items, title, isLessThanLaptop, router, language, random_match, showRelevancyInfo, itemsPerRow, itemsPerPage, isChatMode, }) => { const [currentIsLessThanLaptop, setIsCurrentIsLessThanLaptop] = useState(false) const [itemsToShow, setItemsToShow] = useState(0) const [gridId, setGridId] = useState(null) useEffect(() => { if (isLessThanLaptop) setIsCurrentIsLessThanLaptop(isLessThanLaptop) }, [isLessThanLaptop]) useEffect(() => { if (id !== gridId) { setGridId(id) setItemsToShow(itemsPerPage) } }, [id]) if (!items?.length) return null const getItems = () => { const slicedItemsToShow = items.slice(0, itemsToShow) let itemsToReturn = slicedItemsToShow?.map((item, i) => { return ( <TripItem key={item.id || item.url + item?.name} isLessThanLaptop={currentIsLessThanLaptop} router={router} item={item} language={language} showRelevancyInfo={showRelevancyInfo} randomMatch={random_match} itemsPerRow={itemsPerRow} /> ) }) return itemsToReturn } if (getItems().length) { return ( <GridWrapper id='grid-wrapper-trip'> <GridTitle $padding={'0px 15px 0px 0px'} isChatMode={isChatMode}> {title} </GridTitle> <ItemsWrapper id='grid-trip-items-wrapper'>{getItems()}</ItemsWrapper> {itemsToShow < items.length ? ( <ShowMoreCta onClick={() => { setItemsToShow(itemsToShow + itemsPerPage) }} > {TRANSLATIONS_TEXTS.show_more[language]} </ShowMoreCta> ) : null} </GridWrapper> ) } else return null } export default TripsGrid当旅行网格（或任何其他网格延迟加载）时，我收到以下错误，此外，这些错误有时似乎是随机发生的。
我研究了这个问题，花了好几个小时。根据 这里的 ，这是由于错误的钩子调用或 React 版本不匹配错误造成的。
-
我已经通过日志检查了 React 版本在应用程序加载时间和延迟加载组件的加载时间上是否相同
console.log(React.version) -
使用两个小部件中的一个时不存在错误，这令人
search困惑chat。 - 我已经添加了代码。看起来我没有任何错误的钩子调用
如果我这样做是
npm ls react为了查看我的应用中是否有多个版本的 React，那么我得到的只有一个版本。输出如下：
请注意，当我不像这样延迟加载行程网格（或任何其他网格）时，它也能正常工作：
import React, { useMemo } from 'react' import Common from './common/TripsGrid' import ClientA from './clientA/TripsGrid' import ClientB from './clientB/TripsGrid' const TripsGridLoader = ({ id, items, title, isLessThanLaptop, router, language, random_match, showRelevancyInfo, organizationSlug, itemsPerRow, itemsPerPage, isChatMode, }) => { // Memoize the lazy-loaded component based on organizationSlug const TripGridLazyLoaded = useMemo(() => { if (!organizationSlug) return null switch (organizationSlug) { case 'clientA': return ClientA case 'clientB': return ClientB default: return Common } }, [organizationSlug]) return ( <> <TripGridLazyLoaded id={id} title={title} items={items} random_match={random_match} isLessThanLaptop={isLessThanLaptop} router={router} language={language} showRelevancyInfo={showRelevancyInfo} organizationSlug={organizationSlug} itemsPerRow={itemsPerRow} itemsPerPage={itemsPerPage} isChatMode={isChatMode} /> </> ) } export default TripsGridLoader谁能给我指出正确的方向？
-
我已经通过日志检查了 React 版本在应用程序加载时间和延迟加载组件的加载时间上是否相同
-
引用 7楼 -
引用 9楼 -
引用 10楼 -
引用 11楼 -
引用 12楼
-
引用 13楼 -
-
-
引用 16楼 -
-
-
引用 19楼 -
