我有一个 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

谁能给我指出正确的方向？