Javascript TypeError:无法读取ContactComponent.js中未定义的属性“firstname”

Contact.render

F:/React/mission/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-

请告诉我为什么会出现此错误？

问题 您正在第133行访问未定义对象的某个值firstname，即错误必须是未定义的。沿着小路走

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

函数不返回错误，因此在上未定义

解决方案 在验证函数结束时返回错误

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
}

建议

---

当您遇到错误时，请阅读所有消息，它们通常包括行号和堆栈跟踪，并告诉您问题所在。这就是他们在那里的目的。还请在问题中包含您的相关代码，因为git repos可能会发生变异或时间变化，甚至会完全重新定位，但这里应该包含这些代码，以供将来的读者阅读。

Commit:C250B1926DDEA57C61FFA2179A202C8C3AE647欢迎使用SO，注意它不是调试服务，请参阅

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
}