Tengo un problema con la validación de un formulario en reaccionar. Tengo un formulario de registro en mi proyecto de principiante de reacción de la siguiente manera:

 import React from "react"; import Form from "./common/form"; import { Joi } from "joi-browser"; import * as userService from "../services/userService"; class RegisterForm extends Form { state = { data: { username: "", password: "", name: "" }, errors: {} }; schema = { username: Joi.string().required().email().label("Username"), password: Joi.string().required().min(5).max(15).label("Password"), name: Joi.string().required().label("Name") }; doSubmit = async () => { await userService.registerUser(this.state.data); }; render() { return ( <div> <h1>Register</h1> <form onSubmit={this.handleSubmit}> {this.renderInput("username", "Username", "email")} {this.renderInput("password", "Password", "password")} {this.renderInput("name", "Name")} {this.renderButton("Register")} </form> </div> ); } } export default RegisterForm;

como puede ver, estoy usando el paquete joi-browser para validar mis entradas, pero en el frente tengo el siguiente error:

Error de tipo: no se pueden leer las propiedades de un formulario de registro nuevo indefinido (leyendo 'cadena') E:/computadora/Web/React,js/06 - Enrutamiento (00h53m)/1- Recursos/Recursos/Sección 6- Enrutamiento/start/vidly/src/ componentes/registrarForm.jsx:11 8 | errores: {} 9 | }; 10 | esquema = {

11 | nombre de usuario: Joi.string().required().email().label('Nombre de usuario'), 12 | contraseña: Joi.string().required().min(5).max(15).label('Contraseña'), 13 | nombre: Joi.string().required().label("Nombre") 14 | };

por favor ayúdame alguien