ReactJS: проверка в порядке, но ничего не вернуло

Question

Я сделал подтверждение по электронной почте, используя React JS, которое автоматически выдает ошибку, если я не написал действительный адрес электронной почты.

Это моя функция проверки:

export const validate = e => {
  let error = [true, ''];
  if (e.validation.email){
    const valid = /\S+@\S+\.\S+/.test(e.value);
    const message = `${!valid ? 'Must be a valid Email' : ''}`;
    error = !valid ? [valid,message]: error;
  }
  if (e.validation.required) {
    const valid   = e.value.trim() !== '';
    const message = `${!valid ? 'This field is Required' : ''}`;
    error = !valid ? [valid,message]: error
  }
  return error
};

Вся эта проверка относится к этому состоянию из другого файла:

state = {
    formError  : false,
    formSuccess: '',
    formdata   : {
      email: {
        element          : 'input',
        value            : '',
        config           : {
          name       : 'email_input',
          type       : 'email',
          placeholder: 'Enter your Email'
        },
        validation       : {
          required: true,
          email   : true
        },
        valid            : false,
        validationMessage: ''
      }
    }
  };

Все сообщения об ошибках проверки будут помещены вshowError() функция, и я уже ввел ее на formFields.js.И это файл formFields.js:

import React from 'react';

const FormField = ({formdata, id, change}) => {

  const showError = () => {
    let errorMessage = <div className="error_label">
      {
        formdata.validation && !formdata.valid ?
          formdata.validationMessage
          : null
      }
    </div>
    console.log(errorMessage);
    return errorMessage;
  };

  const renderTemplate = () => {
    let formTemplate = null;
    switch (formdata.element) {
      case('input'):
        formTemplate = (
          <div>
            <input
              {...formdata.config}
              value={formdata.value}
              onChange={event => change({event, id})}
            />
            {showError()}
          </div>
        );
        break;
      default:
        formTemplate = null;
    }
    return formTemplate;
  };

  return (
    <div>
      {renderTemplate()}
    </div>
  );
};

export default FormField;

Я уже развернул и сделал console.log() для каждой переменной и данных, которые я написал, и из React Tab.

Когда я ввожу неправильный адрес электронной почты:

Когда я очищаю поле:

Когда я набираю действительное письмо:

Сообщение об ошибке проверки обновлено в этом состояниино когда я console.log(errorMessage) на showError() функция, он возвращается, как это возможно, что является основной возможной проблемой:

Что я ожидал от console.log -ing errorMessage - это тег div с сообщением об ошибке.но я только что получил кучу объектных данных.

Какой код я ввел неправильно?Я что-то упустил в коде?

Answer 1

На скриншотах вы помещаете сообщение об ошибке в formdata.email.message, но formdata.email.validationMessage всегда пусто, а в вашем showError вы используете только validationMessage, поэтому вы видите пустое сообщение.

const showError = () => {
    let errorMessage = <div className="error_label">
      {
        formdata.validation && !formdata.valid ?
          formdata.validationMessage /*This is always empty*/
          : null
      }
    </div>
    console.log(errorMessage);
    return errorMessage;
  };