道具验证/ HTML实体中缺少的必须转义

Question

我刚刚写完了这段代码以确保Spring Boot的安全性。基本上，这是一个具有注册和登录权限的网站，但是当我尝试创建条目时，会出现错误。

错误1：

{
    "resource": "/c:/Users/irobert/Desktop/alhub-react-master/src/components/forms/SignupForm.js",
    "owner": "eslint",
    "code": "react/prop-types",
    "severity": 8,
    "message": "'serverErrors' is missing in props validation",
    "source": "eslint",
    "startLineNumber": 19,
    "startColumn": 39,
    "endLineNumber": 19,
    "endColumn": 51
}

这是我尝试注册时收到的错误消息： TypeError：无法获取未定义或空引用的属性“电子邮件”

 47 | render() {
  48 |   const { data, errors } = this.state;
  49 | 
> 50 |   return (
  51 |     <form onSubmit={this.onSubmit}>
  52 |       <div className="form-group">
  53 |         <label htmlFor="email">Email</label>

这就是错误的js：

import React from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import { Link } from "react-router-dom";
import isEmail from "validator/lib/isEmail";
import { createUserRequest } from "../../actions/users";

class SignupForm extends React.Component {
  state = {
    data: {
      email: "",
      username: "",
      password: ""
    },
    errors: {}
  };

  componentWillReceiveProps(nextProps) {
    this.setState({ errors: nextProps.serverErrors });
  }

  onChange = e =>
    this.setState({
      data: { ...this.state.data, [e.target.name]: e.target.value }
    });

  onSubmit = e => {
    e.preventDefault();
    const errors = this.validate(this.state.data);
    this.setState({ errors });
    if (Object.keys(errors).length === 0) {
      this.setState({ loading: true });
      this.props.submit(this.state.data);
    }
  };

  validate = data => {
    const errors = {};

    if (!isEmail(data.email)) errors.email = "Invalid email";
    if (!data.password) errors.password = "Can't be blank";
    if (!data.username) errors.username = "Can't be blank";

    return errors;
  };

  render() {
    const { data, errors } = this.state;

    return (
      <form onSubmit={this.onSubmit}>
        <div className="form-group">
          <label htmlFor="email">Email</label>
          <input
            type="email"
            id="email"
            name="email"
            value={data.email}
            onChange={this.onChange}
            className={
              errors.email ? "form-control is-invalid" : "form-control"
            }
          />
          <div className="invalid-feedback">{errors.email}</div>
        </div>

        <div className="form-group">
          <label htmlFor="username">Username</label>
          <input
            type="text"
            id="username"
            name="username"
            value={data.username}
            onChange={this.onChange}
            className={
              errors.username ? "form-control is-invalid" : "form-control"
            }
          />
          <div className="invalid-feedback">{errors.username}</div>
        </div>

        <div className="form-group">
          <label htmlFor="password">Password</label>
          <input
            type="password"
            id="password"
            name="password"
            value={data.password}
            onChange={this.onChange}
            className={
              errors.password ? "form-control is-invalid" : "form-control"
            }
          />
          <div className="invalid-feedback">{errors.password}</div>
        </div>

        <button type="submit" className="btn btn-primary btn-block">
          Sign Up
        </button>

        <small className="form-text text-center">
          or <Link to="/login">LOGIN</Link> if you have an account
        </small>
      </form>
    );
  }
}

function mapStateToProps(state) {
  return {
    serverErrors: state.formErrors.signup
  };
}

SignupForm.propTypes = {
  submit: PropTypes.func.isRequired
};

export default connect(mapStateToProps, { submit: 
createUserRequest })(
  SignupForm
);

第二个错误是：

{
    "resource": "/c:/Users/irobert/Desktop/alhub-react-master/src/components/forms/LoginForm.js",
    "owner": "eslint",
    "code": "react/no-unescaped-entities",
    "severity": 8,
    "message": "HTML entities must be escaped.",
    "source": "eslint",
    "startLineNumber": 85,
    "startColumn": 55,
    "endLineNumber": 85,
    "endColumn": 55
}

这是我尝试登录时收到的错误消息： TypeError：无法获取未定义或空引用的属性“全局”

41 | render() {
  42 |   const { data, errors } = this.state;
  43 | 
> 44 |   return (
  45 |     <form onSubmit={this.onSubmit}>
  46 |       {errors.global && (
  47 |         <div className="alert alert-danger">{errors.global}</div>

第二个脚本：

import React from "react";
import { Link } from "react-router-dom";
import PropTypes from "prop-types";
import Validator from "validator";

class LoginForm extends React.Component {
  state = {
    data: {
      email: "",
      password: ""
    },
    errors: {}
  };

  onChange = e =>
    this.setState({
      data: { ...this.state.data, [e.target.name]: e.target.value }
    });

  onSubmit = e => {
    e.preventDefault();
    const errors = this.validate(this.state.data);
    this.setState({ errors });
    if (Object.keys(errors).length === 0) {
      this.setState({ loading: true });
      this.props
        .submit(this.state.data)
        .catch(err =>
          this.setState({ errors: err.response.data.errors, loading: false })
        );
    }
  };

  validate = data => {
    const errors = {};
    if (!Validator.isEmail(data.email)) errors.email = "Invalid email";
    if (!data.password) errors.password = "Can't be blank";
    return errors;
  };

  render() {
    const { data, errors } = this.state;

    return (
      <form onSubmit={this.onSubmit}>
        {errors.global && (
          <div className="alert alert-danger">{errors.global}</div>
        )}

        <div className="form-group">
          <label htmlFor="email">Email</label>
          <input
            type="email"
            id="email"
            name="email"
            value={data.email}
            onChange={this.onChange}
            className={
              errors.email ? "form-control is-invalid" : "form-control"
            }
          />
          <div className="invalid-feedback">{errors.email}</div>
        </div>

        <div className="form-group">
          <label htmlFor="password">Password</label>
          <input
            type="password"
            id="password"
            name="password"
            value={data.password}
            onChange={this.onChange}
            className={
              errors.password ? "form-control is-invalid" : "form-control"
            }
          />
          <div className="invalid-feedback">{errors.password}</div>
        </div>

        <button type="submit" className="btn btn-primary btn-block">
          Login
        </button>

        <small className="form-text text-center">
          <Link to="/signup">Sign up</Link> if you don't have an account<br />
          <Link to="/forgot_password">Forgot Password?</Link>
        </small>
      </form>
    );
  }
}

LoginForm.propTypes = {
  submit: PropTypes.func.isRequired
};

export default LoginForm;