检测函数是否在 React 中的另一个组件上运行

Question

我需要检测 handleSelectProduct 是否在另一个组件中被调用。我的问题是，如果我希望子组件 (ProductDetailsComponent) 重新呈现，它仍会输出 console.log('HELO')。我只想输出 console.log('HELO') IF handleSelectProduct is being click only.

const ProductComponent = () => {
  const [triggered, setTriggered] = React.useState(0);

  const handleSelectProduct = (event) => {
    setTriggered(c => c + 1);
  };

  return (
    <div>
      Parent
      <button type="button" onClick={handleSelectProduct}>
        Trigger?
      </button>
      <ProductDetailsComponent triggered={triggered} />
    </div>
  );
};

const ProductDetailsComponent = ({ triggered }) => {
  React.useEffect(() => {
    if (triggered) {
      console.log('HELO');
    }
  }, [triggered]);

  return <div>Child</div>;
};

ReactDOM.render(
  <ProductComponent />,
  document.getElementById("root")
);

Answer 1

我觉得最简单的解决方案是使用 useRef 来保留旧值，因此仅当触发值发生变化时才考虑 console.log。

const ProductDetailsComponent = ({ triggered }) => {
  const oldTriggerRef = React.useRef(0);
  React.useEffect(() => {
    if (triggered !== oldTriggerRef.current) {
      oldTriggerRef.current = triggered;
      console.log('HELO');
    }
  }, [triggered]);

  return <div>Child</div>;
};

检测函数是否在 React 中的另一个组件上运行

Detect If Function Runs on Another Component in React

ecmascript-6

reactjs

react-hooks