пронц не печатается внутри моего метода AsyncValidationForm - PullRequest
0 голосов
/ 26 декабря 2018
  • Я новичок в редуксе.
  • Я пытаюсь заставить мою форму редукса работать в моем приложении.
  • , но проблема в том, что если я введу что-либо в текстовое поле значенияне отображается в браузере.
  • , поэтому я отладил и установил консоль, консоль, которую я дал внутри AsyncValidationForm, не печатает.console.log ("AsyncValidationForm --->", props);
  • Я не вижу никаких ошибок в инструментах разработчика
  • подскажите, как это исправить.
  • так что в будущем я сделаю это сам.
  • предоставив фрагмент кода и песочницу ниже

https://codesandbox.io/s/5kvyxlwqwp

AsyncValidationForm.js

const AsyncValidationForm = props => {
  const { handleSubmit, pristine, reset, submitting } = props;
  console.log("AsyncValidationForm--->", props);

  return (
    <form onSubmit={handleSubmit}>
      <Field
        name="username"
        type="text"
        component={renderField}
        label="Username"
      />
      <Field
        name="password"
        type="password"
        component={renderField}
        label="Password"
      />
      <div>
        <button type="submit" disabled={submitting}>
          Sign Up
        </button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>
          Clear Values
        </button>
      </div>
    </form>
  );
};

asyncValidate.js

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

const asyncValidate = (values /*, dispatch */) => {
  return sleep(1000).then(() => {
    // simulate server latency
    console.log("asyncValidate--->", values);
    if (["john", "paul", "george", "ringo"].includes(values.username)) {
      throw { username: "That username is taken" };
    }
  });
};

export default asyncValidate;

validate.js

const validate = values => {
  const errors = {};
  if (!values.username) {
    errors.username = "Required";
  }
  if (!values.password) {
    errors.password = "Required";
  }
  console.log("validate--->", errors);
  return errors;
};

export default validate;
...