时间戳

首页 > 解决方案 > 检测函数是否在 React 的另一个组件中被调用

javascript - 检测函数是否在 React 的另一个组件中被调用

问题描述

我调用handleSelectProduct了这个函数ProductComponent，我想在ProductDetailsComponent. 如果handleSelectProduct被调用，那么我想在使用ProductComponent中运行某个函数。ProductDetailsComponentuseEffect

产品组件

const ProductComponent = () => {
  const [selectedProduct, setProduct] = useState(null);

  const handleSelectProduct = (event) => {
    setProduct(event.target.value);
  };

  return (
    <div>
      <Select
        value={selectedProduct}
        onChange={(e) => handleSelectProduct(e)}
      >
        {(products || []).map(({ id, name }) => (
          <MenuItem value={id}>{name}</MenuItem>
        ))}
      </Select>
      <ProductDetailsComponent handleSelectProduct={handleSelectProduct} />
    </div>
  );
};

export default ProductComponent;

产品详情组件

const ProductDetailsComponent = ({ handleSelectProduct }) => {
  useEffect(() => {
    handleSelectProduct ? formik.setFieldValue("productInfo", "") : null;
  }, [handleSelectProduct]);
};

export default ProductDetailsComponent;

标签： javascriptreactjsreact-hooks

解决方案

如果handleSelectProduct被调用ProductComponent，那么我想运行某个函数ProductDetailsComponent

我不认为这正是你真正想要的。如果组件耦合得那么紧密，你应该只使用一个组件。ProductDetailsComponent行为应该只取决于它的 props 和它的内部状态。

ProductDetailsComponent 您真正想要的是在所选产品发生变化时调用某个函数。正如您已经注意到的那样，您可以使用useEffect- 但将产品作为依赖项来做到这一点。您只需将selectedProduct作为道具传递给组件而不是handleSelectProduct函数。

const ProductComponent = () => {
  const [selectedProduct, setProduct] = useState(null);

  return (
    …
    <ProductDetailsComponent selectedProduct={selectedProduct} />
  );
};

const ProductDetailsComponent = ({ selectedProduct }) => {
  useEffect(() => {
    if (selectedProduct) formik.setFieldValue("productInfo", "");
  }, [selectedProduct]);
};

推荐阅读