使用 lodash 去抖动返回承诺

Question

使用React、react-final-form 和 lodash 去抖动函数，我想验证用户名是否尚未使用(该字段正在使用 react-final-form(。

我在让去抖功能从获取请求返回已解决的承诺时遇到问题。

我提供了以下代码沙箱链接来演示我的问题：

请谁告诉我为什么我的代码不起作用。

验证的入口点来自 this.isNameUnique

调用，该调用在

import React from "react";
import { Field, Form } from "react-final-form";
import { debounce } from "lodash";
class DemoForm extends React.Component {
getIsNameUnique = name => {
console.log("getIsNameUnique", name);
// fake fetch request
return async name => {
const asyncResponse = await new Promise(resolve =>
setTimeout(resolve({ name: true }), 1000)
);
console.log("async api response", asyncResponse);
return asyncResponse;
};
};
debounceCreativeName = name => {
console.log("debounceCreativeName", name);
return new Promise(resolve => {
debounce(() => resolve(this.getIsNameUnique(name)), 2000);
});
};
isNameUnique = async name => {
const isNameAvailable = await this.debounceCreativeName(name);
console.log("isNameAvailable", isNameAvailable);
return isNameAvailable;
};
render() {
return (
<Form
onSubmit={() => null}
render={({ handleSubmit, reset, submitting, pristine, values }) => {
return (
<form onSubmit={handleSubmit}>
<Field name="name" validate={this.isNameUnique}>
{({ input, meta }) => {
return (
<input
style={{
display: "flex",
height: "40px",
fontSize: "24px"
}}
autoComplete="off"
{...input}
type="text"
placeholder="Enter the name"
/>
);
}}
</Field>
</form>
);
}}
/>
);
}
}
export default DemoForm;

Answer 1

此沙盒可解决您的问题。

您不应在每次渲染上创建新的去抖动函数：

return new Promise(resolve => {
debounce(() => resolve(this.getIsNameUnique(name)), 2000);
});

相反，您应该将整个函数包装isNameUnique与去抖动一起(请参阅我的沙盒(。通过在每次命中时创建一个新的去抖动函数，它无法"记住"被调用或将再次调用的。 这将防止去抖动。

此外，通过制作异步getIsNameUnique您可以降低仅使用 await 的复杂性。