Question

我试图让无效反馈验证在屏幕上显示5秒后消失。在我的状态下，我有一个空的错误对象，当提交表单时，api调用从后端捕获任何错误，并将它们放在errors对象中，输入使用基于错误对象的条件来显示验证。我尝试创建一个setTimeout函数，在5秒后将状态设置为空对象，但是如果再次错误地提交表单，则会导致破坏故障。我有什么见解如何做到这一点？

Register.js

import React, { Component } from "react";
import axios from 'axios';
import classnames from 'classnames';
class Register extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      email: "",
      password: "",
      password2: "",
      errors: {}
    };
    this.onChange = this.onChange.bind(this);
  }

  onChange(e) {
    // THIS FUNCTION MUST BE BOUND -SEE ABOVE BIND
    this.setState({
      [e.target.name]: e.target.value
    });
  }
  onSubmit = e => {
    // ARROW FUNCTIONS DO NOT NEED TO BE BOUND
    e.preventDefault();
    const newUser = {
      name: this.state.name,
      email: this.state.email,
      password: this.state.password,
      password2: this.state.password2
    };
    this.setState({
      email: "",
      name: "",
      password: "",
      password2: ""
    });
    axios
      .post("/api/users/register", newUser)
      .then(res => console.log(res.data))
      .catch(err => this.setState({ errors: err.response.data }));
  };

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

    return (
      <div>
        <div className="register">
          <div className="container">
            <div className="row">
              <div className="col-md-8 m-auto">
                <h1 className="display-4 text-center text-dark">Sign Up</h1>
                <p className="lead text-center">Create your DevMuse account</p>
                <form onSubmit={this.onSubmit}>
                  <div className="form-group">
                    <input
                      type="text"
                      className={classnames("form-control form-control-lg", {
                        "is-invalid": errors.name
                      })}
                      placeholder="Name"
                      name="name"
                      value={this.state.name}
                      onChange={this.onChange}
                    />
                    {errors.name && (
                      <div className="invalid-feedback">{errors.name}</div>
                    )}
                  </div>
                  <div className="form-group">
                    <input
                      type="email"
                      className={classnames("form-control form-control-lg", {
                        "is-invalid": errors.email
                      })}
                      placeholder="Email Address"
                      name="email"
                      value={this.state.email}
                      onChange={this.onChange}
                    />

                    {errors.email ? (
                      <div className="invalid-feedback">{errors.email}</div>
                    ) : (
                      <small className="form-text text-muted text-center">
                        This site uses Gravatar so if you want a profile image,
                        use a Gravatar email
                      </small>
                    )}
                  </div>
                  <div className="form-group">
                    <input
                      type="password"
                      className={classnames("form-control form-control-lg", {
                        "is-invalid": errors.password
                      })}
                      placeholder="Password"
                      name="password"
                      value={this.state.password}
                      onChange={this.onChange}
                    />
                    {errors.password && (
                      <div className="invalid-feedback">{errors.password}</div>
                    )}
                  </div>

                  <div className="form-group">
                    <input
                      type="password"
                      className={classnames("form-control form-control-lg", {
                        "is-invalid": errors.password2
                      })}
                      placeholder="Confirm Password"
                      name="password2"
                      value={this.state.password2}
                      onChange={this.onChange}
                    />
                    {errors.password2 && (
                      <div className="invalid-feedback">{errors.password2}</div>
                    )}

                  </div>
                  <input
                    type="submit"
                    className="btn btn-info btn-block mt-4"
                  />
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Register;

Answer 1

在启动新的超时之前，只需清除所有现有超时：

componentWillUnmount() {
  clearTimeout(this.clearError);
}

...

.catch((err) => {
  this.setState({ errors: err.response.data });

  clearTimeout(this.clearError); // clear previous timeout, if exists
  this.clearError = setTimeout(() => {
    this.setState({ errors: {} });
  }, 5000);
});

5秒后使无效验证消失--ReactJS--

1 个答案: