使用 debouncer 调试 useCallback 重置 useState 变量答案

【问题标题】：debug useCallback with debouncer resets useState variables使用 debouncer 调试 useCallback 重置 useState 变量
【发布时间】：2021-12-27 23:31:15
【问题描述】：

每次去抖动器启动时，我的所有状态变量都会重置为初始页面加载。有没有比这更可行的解决方案？

注意：debounce 来自 import debounce from 'lodash.debounce';

我在网上找到的每个解决方案都推荐：

useCallback、useMemo 或 useRef（都遇到相同的错误），或者...
是一个封装在类组件中的解决方案（我在这个项目中没有使用类组件）
是一个 hacky 解决方案，我的代码内容（比那些函数体中显示的要大得多）很难与之集成。

以上方法似乎都无法解决此错误。我对 reactjs 的建议或其他推荐的 debouncer 插件持开放态度。

【问题讨论】：

标签： reactjs

【解决方案1】：

即使 useState 变量在 debouncer 中显示为它们的初始值，看起来如果我使用 debounce 仅在布尔值上使用 setState，并在该状态下有一个 useEffect 侦听器，您可以调用那个函数...

  const [executeDebouncer, setExecuteDebouncer] = useState(false);
  // const debounceUpdateProductsInOrder = useCallback(debounce(orderUpdater, 3000), []);
  const debounceUpdateProductsInOrder = useCallback(
    debounce(() => setExecuteDebouncer(true), 3000),
    [],
  );

在此处添加useEffect...

  useEffect(() => {
    if (executeDebouncer) {
      setExecuteDebouncer(false);
      orderUpdater();
    }
  }, [executeDebouncer]);

【讨论】：