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

【问题标题】：Detect If Function Runs on Another Component in React检测函数是否在 React 中的另一个组件上运行
【发布时间】：2023-04-04 20:38:01
【问题描述】：

我需要检测handleSelectProduct 是否在另一个组件中被调用。我的问题是，如果我希望子组件（ProductDetailsComponent）重新渲染，它仍然会输出console.log('HELO')。我只想输出console.log('HELO') IF handleSelectProduct 仅被点击。

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")
);

【问题讨论】：

您是否希望每次单击 handleSelectProduct 时都运行 console.log？问题是你有一个真实的值（一个数字），无论你是否点击（除了它是 0），每次渲染时它总是评估为 true，所以你需要比较触发的旧值和新值

标签： reactjs ecmascript-6 react-hooks

【解决方案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>;
};

【讨论】：

如果triggered 是一个动态值。所以React.useRef(0); 并不总是 0
@Joseph 你能详细说明你的评论吗？我看不出它的意义。