很棒的去抖动承诺不适用于调用函数？

Question

我正在使用 awesome-debounce-promise 和简单的反应应用程序来延迟函数执行，这会触发一个操作来更新数据库中的 header。我也在使用 redux-saga 和 axios，使用 const 的官方示例不起作用，因为我在 axios 中创建 api 调用...onChange 操作我调用此函数...

    changeCity = (e) => {
    let storedHeader = JSON.parse(localStorage.getItem('offer_header'))
      if(storedHeader !== null) {
        let updatedHeader = {
            id : storedHeader.id,
            customer : storedHeader === null ? this.state.customer : storedHeader.customer,
            address : storedHeader === null ? this.state.address : storedHeader.address,
            city : e.target.value,
            date : storedHeader === null ? moment(this.state.date).format("YYYY-MM-DD 00:00:00") : moment(storedHeader.date).format("YYYY-MM-DD 00:00:00"),
            price : parseFloat(localStorage.getItem('offer_header_price')),
            tax : parseFloat(localStorage.getItem('offer_header_price')) * 0.21,
            total : parseFloat(localStorage.getItem('offer_header_price')),
        }
        const result = AwesomeDebouncePromise(this.props.editHeaderDB(updatedHeader), 2000);
        console.log('result = ', result);
    }
    this.setState({
        city: e.target.value
    })
}

api.js

的代码片段

export function editOfferHeader_api(header) {
   return axios.put(apiUrl + '/offerHeader/' + header.id ,header)
}

并且saga.js是

export function* editOfferHeaderDB(action) {
const response = yield call(editOfferHeader_api, action.payload)
if(!response && (!response.data || !response.message)) {
    return yield put(editOfferHeaderDB_failure('Internal server error editing offer header'))
}
if(response.status === 200) {
    localStorage.setItem('offer_header', JSON.stringify(response.data))
    return yield put(editOfferHeaderDB_success(response.data))
} else {
    return yield put(editOfferHeaderDB_failure('Error editing offer header'))
}

}

谁能帮我解决这个问题？

Answer 1

你必须确保你使用的是相同的去抖功能，而不是每次都调用AwesomeDebouncePromise。

因为每次调用都会创建一个新函数，所以会破坏去抖动的目的。

所以您必须首先创建您的去抖函数，最好是在顶层，然后在您的代码中重用它。

（编辑：示例）

export const editOfferHeader_api = AwesomeDebouncePromise(
  function (header) {
    return axios.put(apiUrl + '/offerHeader/' + header.id ,header)
  },
  2000,
)

很棒的去抖动承诺不适用于调用函数？

Awesome debounce promise dosn't work with calling function?

reactjs

async-await

debounce