今天在react useEffect()中有一个function需要防抖，于是乎就install了lodash库，但是直接在useEffect()中使用却没有效果，经过一番查找，最终解决了这个问题。

问题现场

安装引入：

import { useState, useEffect } from "react";
import _ from "lodash";
useEffect(() => {
    _.debounce(mx, 500); //防抖
}, [mc]);

mx是一个函数，但是防抖后不但没有效果，mx这个函数也无法正常执行了，这跟useEffect运行机制有一定关系。 后来经过修改，mx函数是可以执行了，但是mc这个state中的数值又无法同步了。

解决问题

修改代码如下：

useEffect(() => {
    const debounceMX = _.debounce(() => {
    mx();
    console.log(mc);
    }, 500);

    debounceMX();

    return () => {
    debounceMX.cancel();
    };
}, [mc]);

在这个修改后的代码中，debounceMX函数被定义在useEffect的内部，并且mc作为useEffect的依赖项。当mc发生变化时，useEffect将会重新执行，导致debounceMX函数的重新创建和调用。通过将debounceMX.cancel()作为useEffect返回的清理函数，可以确保在组件卸载时取消防抖函数的执行，以避免潜在的问题或错误。

经过多次的修改，最终上边的代码完美的解决了不能防抖以及数据不能同步的问题。