nickola105
@nickola105
начинающий

Почему Promise pending?

Ребят, всем привет.

есть такая функция
import axios from "axios";

const isValidEmail = email => {
  console.log(email);
  const endpoint = process.env.REACT_APP_EMAIL_VALIDATION;
  const url = `${endpoint}&email=${email}`;
  return axios.get(url).then(result => {
    return result.data.format_valid;
  });
};

export default isValidEmail;

Далее она импортируется в реакт компонент и вызывается в рендере
import React from "react";
import FormEmailInput from "./FormEmailInput";
import { Field } from "redux-form";
import withDisabled from "components/connectors/withDisabled";
import PropTypes from "prop-types";
import { flatten } from "lodash";
import hasValue from "utilities/hasValue";
import isValidEmail from "utilities/isValidEmail";

export class FormGroupField extends React.Component {
  requiredValidation = value => {
    const { formDisabled } = this.context;
    const { disabled, required } = this.props;

    if (formDisabled || disabled) return;
    if (!required || hasValue(value)) return;
    // if (isValidEmail(value)) {
    //   return;
    // } else {
    //   return "Invalid Format";
    // }
    return "This field is required";
  };
  emailValidation = value => {
    return isValidEmail(value);
  };
  render() {
    const { validate } = this.props;
    console.log(isValidEmail("mail@gmail.com"));
    return (
      <FormEmailInput
        renderChildren={Field}
        {...this.props}
        validate={flatten([
          this.requiredValidation,
          this.emailValidation,
          validate
        ])}
      />
    );
  }
}

FormGroupField.contextTypes = {
  formDisabled: PropTypes.bool
};

FormGroupField.defaultProps = {
  required: false,
  disabled: false, // only disable the built-in validation
  validate() {} // validation still works here
};

export default withDisabled(FormGroupField);

Почему в консоле выводит Promise {<pending>}
  • Вопрос задан
  • 28475 просмотров
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Вы неправильно работаете с асинхронным кодом. Вызывать его в render неправильно.
Вы что сделать то хотите?
Для работы с асинхронными вызовами основанными на Promise используйте метод then или async/await функции.
Пример использования метода then:
isValidEmail("mail@gmail.com").then(result => someAction(result));

Пример использования async/await:
async someHandler() {
  const result = await isValidEmail("mail@gmail.com");

  return someAction(result);
}

async someOtherHandler() {
  const result = await isValidEmail("mail@gmail.com");
  
  /* вызов someOtherAsyncAction тоже возвращает Promise, поэтому ждем 
     и возвращаем только когда придет результат, для этого используем 
     ключевое слово await                                             */
  return await someOtherAsyncAction(result); 
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Dark_Scorpion
@Dark_Scorpion
Вывод результата валидации.
isValidEmail("mail@gmail.com")
.then( (result) => {
  console.log(result);
})
.catch( (err) => {
  console.log(err);
})
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы