TypeError: Cannot read properties of undefined (reading 'string') with react joi-browser package

Question

我在验证 React 中的表单时遇到问题。我的 React 初学者项目中有一个注册表如下：

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;

如你所见，我正在使用 joi-browser 包来验证我的输入，但在前面我有以下错误：

TypeError: Cannot read properties of undefined (reading 'string') new RegisterForm E:/computer/Web/React,js/06 - Routing (00h53m)/1- Resources/Resources/Section 6- Routing/start/vidly/src/components/registerForm.jsx:11 8 | errors: {} 9 | }; 10 | schema = {

11 | username: Joi.string().required().email().label('Username'), 12 | password: Joi.string().required().min(5).max(15).label('Password'), 13 | name: Joi.string().required().label("Name") 14 | };

请大家帮帮我

Answer 1

换行

import { Joi } from "joi-browser";

至

import Joi from "joi-browser";

这应该可以解决错误。

TypeError: Cannot read properties of undefined (reading 'string') with react joi-browser package

TypeError: Cannot read properties of undefined (reading 'string') with react joi-browser package

javascript

validation

web-frontend

reactjs

joi