Question

由于某种原因，我收到无效的挂接调用错误。这是我第一次为新组件使用钩子。我什至注释掉了代码和/或从代码中删除了钩子，但是仍然给出了错误。我可以想到的另一件事是，我通过提供直接文件路径（例如，

）将该组件安装到应用中

"dependencies": {
  "br": "file.../br"
}

如果有2个React版本，哪个会发生？我不确定是不是这个问题。

import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";
import BrRelatedSearchCategory from "./bloomreach/br-related-search-category";
import BrRelatedProduct from "./bloomreach/br-related-product";
import {fetchBrSEO} from "../store/bloomreach/bloomreach-seo.actions";
export const baseClass = "sc-br";
const c = prefix(baseClass);

/* Each module can be individually not rendered by passing in the corresponding prop
*  hideRelatedSearches
*  hideRelatedCategories
*  hideRelatedProducts  */

export const BloomreachSEO = ({relatedSearches, relatedCategories, relatedProducts, fetchBrSEO, hideRelatedSearches, hideRelatedCategories, hideRelatedProducts}) => {
  // Fetch bloomreach data
  useEffect(() => {
    fetchBrSEO();
  }, [])

  const RelatedSearches = ({relatedSearches, hideRelatedSearches}) => {
    if (relatedSearches && !hideRelatedSearches) {
      return (
        <div className={c("related-searches")}>
          <b className={c("related-searches-title")}>Related searches</b>
          <div className={c("related-searches-container")}>
            {relatedSearches.map((relatedSearch) => {
              return (
                <BrRelatedSearchCategory
                  searchOrCategory={relatedSearch}
                  className={"search"}
                />
              )
            })}
          </div>
        </div>
      )
    }
    return null;
  }

  const RelatedCategories = ({relatedCategories, hideRelatedCategories}) => {
    if (relatedCategories && !hideRelatedCategories) {
      return (
        <div className={c("related-categories")}>
          <b className={c("related-categories-title")}>Related categories</b>
          <div className={c("related-categories-container")}>
            {relatedCategories.map((relatedCategory) => {
              return (
                <BrRelatedSearchCategory
                  searchOrCategory={relatedCategory}
                  className={"category"}
                />
              )
            })}
          </div>
        </div>
      )
    }
    return null;
  }

  const RelatedProducts = ({relatedProducts, hideRelatedProducts}) => {
    if (relatedProducts && !hideRelatedProducts) {
      return (
        <div className={c("related-products")}>
          <b className={c("related-products-title")}>Related products</b>
          <div className={c("related-products-container")}>
            {relatedProducts.map((product) => {
              return (
                <BrRelatedProduct
                  relatedProduct={product}
                />
              )
            })}
          </div>
        </div>
      )
    }
    return null;
  }

  return (
    <div className={c(baseClass)}>
      <RelatedSearches
        relatedSearches={relatedSearches}
        hideRelatedSearches={hideRelatedSearches}
      />
      <RelatedCategories
        relatedCategories={relatedCategories}
        hideRelatedCategories={hideRelatedCategories}
      />
      <RelatedProducts
        relatedProducts={relatedProducts}
        hideRelatedProducts={hideRelatedProducts}
      />
    </div>
  );
}

BloomreachSEO.propTypes = {
  relatedSearches: PropTypes.array,
  relatedCategories: PropTypes.array,
  relatedProducts: PropTypes.array,
  fetchBrSeo: PropTypes.func,
  hideRelatedSearches: PropTypes.bool,
  hideRelatedCategories: PropTypes.bool,
  hideRelatedProducts: PropTypes.bool
};

BloomreachSEO.defaultPops = {
  hideRelatedCategories: false,
  hideRelatedProducts: false,
  hideRelatedSearches: false
}

export default page(
  state => ({
    relatedSearches: state["related-item"],
    relatedCategories: state["related-category"],
    relatedProducts: state["more-results"]
  }),
  {
    fetchBrSEO
  }
)(BloomreachSEO);

Answer 1

就像通过直接链接到本地软件包来安装我的本地软件包一样

"dependencies": {
  "br": "file.../br"
}

是问题。问题是有2个来自应用程序的响应和一个来自我本地软件包本身的响应。我改用yalc，现在一切正常。

无效的挂接调用。只能在函数组件的主体内部调用钩子

1 个答案: