React中如何检测父组件handleSelectProduct调用并在子组件触发useEffect

现有代码的问题 #

你当前的实现逻辑无法生效，原因是：handleSelectProduct 是函数引用，将其作为 useEffect 的依赖时，只有当函数引用本身发生变化才会触发副作用，和函数是否被调用没有关联。

推荐解决方案 #

handleSelectProduct 调用的本质是触发了父组件 selectedProduct 状态的更新，直接将该状态作为 props 传递给子组件，监听该状态变化即可实现需求。

改造后的 ProductComponent 代码 #

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} key={id}>{name}</MenuItem>
        ))}
      </Select>
      {/* 传递选中状态而非函数引用 */}
      <ProductDetailsComponent selectedProduct={selectedProduct} />
    </div>
  );
};

export default ProductComponent;

改造后的 ProductDetailsComponent 代码 #

const ProductDetailsComponent = ({ selectedProduct }) => {
  useEffect(() => {
    // selectedProduct 变化时执行对应逻辑，可自行调整判断条件
    if (selectedProduct) {
      formik.setFieldValue("productInfo", "");
    }
  }, [selectedProduct]);

  // 组件其余原有逻辑
};

export default ProductDetailsComponent;

备选场景方案 #

如果你的业务场景需要单独监听函数的调用动作，而非关联的状态变化，可以新增调用触发计数器实现：

父组件调整 #

const ProductComponent = () => {
  const [selectedProduct, setProduct] = useState(null);
  // 新增调用计数器
  const [selectCallCount, setSelectCallCount] = useState(0);

  const handleSelectProduct = (event) => {
    setProduct(event.target.value);
    // 每次调用更新计数器，强制触发变更
    setSelectCallCount(prev => prev + 1);
  };

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

子组件调整 #

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

内容的提问来源于stack exchange，提问作者Joseph