Reactjs 在其内部设置状态时，去抖动不工作

执行自动完成的组件。 键入API请求时，会发送请求，因此我添加了一个去公告器。 在解Bouncer内设置inputValue时，解Bouncer不会预执行

const SearchComp  = ({
    autoCompleteRes,
    classes,
    currCondtionsForSelectedAction, 
    forecastForSelectedAction, 
    searchAction,
      }) => {
    const [ inputValue, setInputValue] = useState('Tel aviv')

    const changeText = (e) => {
        const searchTerm = e.target.value.trim()
        if( searchTerm === ('' || undefined)) {
            clearSearchAction()
            return
        } 
        searchAction(searchTerm)
    }

     const debounce = (func) => {
        let debouncerTimer;
        return function(e){
            setInputValue(e.target.value) // if i comment this line 
            const context = this;
            const args = arguments;
            clearTimeout(debouncerTimer);
            e.persist()
            debouncerTimer = setTimeout(() => {
                return func.apply(context,args)},1500)
        }
    }

    const onClickedRes = (selected) => {
        setInputValue(`${selected.LocalizedName}, ${selected.AdministrativeArea.LocalizedName} ${selected.Country.LocalizedName}`)
        forecastForSelectedAction(selected);
        currCondtionsForSelectedAction(selected);
    }

    return (
            <div className={classes.root}>
                <div className={classes.inputWrapper}>

                    <input type="text" className={classes.inputStyle} name="firstname" 
                        value={inputValue} // and comment this line the debouncer works
                        onChange={debounce(changeText)} 
                    />
                    <div className={classes.dropDownContent}>
                      {autoCompleteRes.map(item => (
                          <div 
                            key={item.Key} 
                            className={classes.autoCompleteSingleRes} 
                            onClick={() =>  onClickedRes(item) }
                          >
                             {`${item.LocalizedName}, ${item.AdministrativeArea.LocalizedName} ${item.Country.LocalizedName}`}
                         </div>))}
                    </div>
                </div>
            </div>
        )
;}

const SearchComp=({
自动补全器，
班级，
选定操作的当前条件，
预选行动，
搜索行动，
}) => {
常量[inputValue，setInputValue]=useState（'Tel-aviv'）
常量changeText=（e）=>{
const searchTerm=e.target.value.trim（）
if（searchTerm==（“”| |未定义））{
clearSearchAction（）
返回
} 
searchAction（searchTerm）
}
常数去盎司=（函数）=>{
让我们去Bounmer；
返回函数（e）{
setInputValue（e.target.value）//如果我注释此行
const context=this；
常量args=参数；
clearTimeout（去Bouncertimer）；
e、 坚持
debouncerTimer=setTimeout（（）=>{
返回函数apply（上下文，参数）}，1500）
}
}
const onClickedRes=（选定）=>{
setInputValue（`selected.LocalizedName}，${selected.AdministrativeArea.LocalizedName}${selected.Country.LocalizedName}`）
所选行动的预测（选定）；
选定操作的当前条件（选定）；
}
返回(
{autoCompleteRes.map（项=>(
单面体（项目）}
>
{`${item.LocalizedName}，${item.AdministrativeArea.LocalizedName}${item.Country.LocalizedName}`}
))}
)
;}

我调用每个键盘笔划，而不是一次调用changeText函数

不知道发生了什么以及如何解决

---

感谢

通过在功能组件中使用去盎司功能，它可以在每次渲染时重新创建该功能（每次击键都会导致重新渲染），并将新创建的

去盎司

功能应用于

更改文本

您可以采取以下几种方法：

1） 将

debounce

函数移到组件外部，使其在渲染之间是幂等的。这意味着您将

setInputValue

等放入传递给解盎司的

func

参数中，因为它们现在不在范围内

2） 将你的

debounce

函数包装在一个

React中。使用callback

，它将记忆

debounce

，因此它不会在渲染之间更改，除非它所依赖的依赖项更改（

setinputValue

）。

1）不会将正确的值传递到输入字段，由于在

setTimeout

内部调用了

func

，因此只有在

setTimeout

完成后才会调用

setInputValue

，--------------------------------------------------------------2）我尝试过使用它，但可能遗漏了什么。因为它没有任何效果<代码>useCallback（（func）=>{…debouncerTimer=setTimeout（（）=>{返回函数应用（上下文，参数）}，1500）}，[]））