如何在 React 中只获取一次结果？答案

【问题标题】：How to get the results only once in React?如何在 React 中只获取一次结果？
【发布时间】：2022-11-18 10:49:21
【问题描述】：

我是用vision-camera来获取barcode/qrcode，所以结果会不断的返回，如图。

我在模态中使用它，当我得到结果时，我关闭了模态。但是它也跑了3次，所以我加了3次产品。

我尝试使用usePrevious 并且有效。

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

但是当我再次打开扫描模式添加产品时，它不会添加，因为 usePrevious 仍然是一样的。

那么，如题，有什么解决办法吗？

【问题讨论】：

请编辑您的问题以包含 minimal, reproducible example。您询问的是您未向我们展示的代码，因此除非您进行编辑以使其适合 SO，否则此问题将被关闭。
这是在生产中吗？如果您正在运行开发版本，您可能处于严格模式，这会导致 useEffect 触发两次，但不会触发三次。

【解决方案1】：

您错过了 useEffect 中的 dependency array。

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  }, [value]);
  return ref.current;
}

【讨论】：