TypeError: невозможно прочитать свойство firstname из undefined, в ContactComponent. js

Question

Contact.render

F: /React/confusion/src/components/ContactComponent.js: 133

<Input type="text" id="firstname" name="firstname"
  placeholder="First Name"
  value={this.state.firstname}
  valid={errors.firstname === ''}
  invalid={errors.firstname !== ''}
  onBlur={this.handleBlur('firstname')}
  onChange={this.handleInputChange} />

github: https://github.com/KhushalAbrol/KhushalAbrol--Ristorante-Con-Fusion-React-

скажите пожалуйста, почему возникает эта ошибка?

Answer 1

Проблема

Вы получаете доступ к некоторому значению firstname неопределенного объекта в строке 133, то есть errors должно быть неопределенным. Следуйте по следу ...

valid={errors.firstname === ''}

Вы не возвращаете errors из функции validate, поэтому оно не определено в строке 82 .

const errors = this.validate(
  this.state.firstname,
  this.state.lastname,
  this.state.telnum,
  this.state.email
);

Решение

Вернуть errors в конце функции проверки.

validate(firstname, lastname, telnum, email) {
    const errors = {
        firstname: '',
        lastname: '',
        telnum: '',
        email: '',
    };

    if (this.state.touched.firstname && firstname.length <=3)
        errors.firstname = 'First Name should be >=3 characters'
    else if (this.state.touched.firstname && firstname.length >=10)
        errors.firstname = 'First Name should be <=10 characters'

    if (this.state.touched.lastname && lastname.length <=3)
        errors.lastname = 'Last Name should be >=3 characters'
    else if (this.state.touched.lastname && lastname.length >=10)
        errors.lastname = 'Last Name should be <=10 characters'

    const reg = /^\d+$/;
    if (this.state.touched.telnum && !reg.test(telnum))
        errors.telnum = 'Last Name should contain only '
    
    if (this.state.touched.email && email.split('').filter(x => x === '@').length !==1)
        errors.email = 'mail should contain a \'@\' '

    return errors; // <-- return errors object for consumption
}

Предложение

При появлении ошибок, пожалуйста прочтите все сообщение, они обычно включают номера строк и трассировки стека, и прямо скажите, в чем проблема. Вот для чего они нужны. Пожалуйста, также укажите свой соответствующий код IN ваш вопрос, поскольку репозитории git имеют тенденцию видоизменяться или изменяться со временем или даже полностью перемещаться, но код должен быть включен здесь для будущих читателей.