Question

使用React，react-final-form和lodash防反跳功能，我想验证用户名是否已被使用（该字段正在使用react-final-form）。

我在获取debounce函数以从获取请求中返回已解决的promise时遇到问题。

我提供了以下codesandbox链接来演示我的问题：

请任何人告诉我为什么我的代码不起作用。

验证的入口点来自

的validate属性中引用的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

此sandbox解决了您的问题。

您不应使用以下方法在每个渲染器上创建新的去抖动功能：

default_scope -> {order(name: :asc)}

相反，您应该只将整个函数return new Promise(resolve => { debounce(() => resolve(this.getIsNameUnique(name)), 2000); });包含在反跳中（请参阅我的沙盒）。通过在每次匹配中创建一个新的去抖功能，它无法“记住”已调用或将再次调用。这样可以防止抖动。

此外，通过创建异步isNameUnique，您可以仅使用await来降低其复杂性。

使用lodash反跳来返回承诺

1 个答案: