在使用 debouce

如何解决在使用 debouce

我正在尝试使用我自己的纯 js 函数实现去抖动，以便使用 axios POST 请求调用操作文件中的操作。

输入框组件中的以下代码

import React,{ useState,useCallback } from 'react'
import { searchDrug } from '../../actions/drug-interaction'

function CustomInputSearch(props) {
  const { handleSelectInput } = props


  const apiCall = (value) => {
    searchDrug(value)
    
}

  const debounce = (apiFunc,delay) => {
    let inDebounce
    return function () {
      const context = this
      const args = arguments 
      clearTimeout(inDebounce)
      inDebounce = setTimeout(() => apiFunc.apply(context,args),delay)
    }
  }

  const optimizedVersion = debounce(apiCall,500)

  const handleChange = (e) => {
    optimizedVersion(e.target.value)
  }

  return (
    <div>
      <input
        className='form-control'
        placeholder='Search Drug...'
        onKeyUp={handleChange}
      />
    </div>
  )
}

export default CustomInputSearch

忽略不必要的导入。

下面的代码是动作文件。

export const searchDrug = (drug) => {
    const params = {
        "start": drug,"limit": 100
    }
    let axiosConfig = {
        headers: {
            // 'Access-Control-Allow-Origin': '*'
        }
    }
    return  (dispatch) => {
        dispatch({ type: 'DRUG_LIST_NOTIFY',payload: { drugListLoading: true } })
         axios.post(`${API_URL}/drug/autocomplete`,params,axiosConfig)
            .then((response) => {
                dispatch({
                    type: 'DRUG_LIST',payload: { response: response.data,drugListLoading: false }
                })
            })
            .catch((error) => {
                dispatch({ type: 'DRUG_LIST_NOTIFY',payload: { drugListLoading: false } })
                if (error.response && error.response.status === 401) {
                    window.open('/?src=auth-error','_self')
                }
            });
    };
}

但我在浏览器的网络选项卡中没有看到任何请求。我也在 redux 商店中使用了 ComposerWithDevtools。提前致谢

解决方法

这是因为您的 searchDrug 操作必须来自 dispatch 而不是直接调用它。

import React,{ useState,useCallback } from 'react'
import { useDispatch } from 'react-redux'
import { searchDrug } from '../../actions/drug-interaction'

function CustomInputSearch(props) {
  const { handleSelectInput } = props
  const dispatch = useDispatch()

  const apiCall = (value) => {
    dispatch(searchDrug(value))
  }
  ...