Question

我正在尝试使用React进行一些表单验证，为此，我正在使用NPM验证程序包并在我的表单组件之后运行验证程序，但是我遇到了Maximum update depth exceeded错误

我的代码：

 <Field>
          <Control>
            <Label>Epost</Label>
            <Input
              required
              name="email"
              type="email"
              placeholder="Email input"
              value={email}
              onChange={this.handleEvent}
            />
            {validator.validate(email) ? (
              <Help color="success">
                <b>Correct email</b>
                {this.setState({ validEmail: true })}
              </Help>
            ) : (
              <Help color="danger">
                <b>Wrong email</b>
                {this.setState({ validEmail: false })}
              </Help>
            )}
          </Control>
        </Field>

不确定我的错误在哪里，有什么想法吗？

Answer 1

验证后，应更新状态“ validEmail”。为什么不在handleEvent中更新它而不是不正确地呈现它？

Answer 2

我的更正代码，感谢Danilo的帮助：

 handleEvent = e => {
    this.setState({ [e.target.name]: e.target.value });
    if (validator.validate(this.state.email) && this.state.validEmail !== "") {
      this.setState({ validEmail: true });
      console.log("korrekt epost");
    } else {
      this.setState({ validEmail: false && this.state.validEmail !== "" });
      console.log("ikke korrekt epost");
    }
  };

....

  <Field>
          <Control>
            <Label>Epost</Label>
            <Input
              required
              name="email"
              type="email"
              placeholder="Email input"
              value={email}
              onChange={this.handleEvent}
            />
            {validEmail ? (
              <Help color="success">
                <b>Den epostadressen ser fin ut</b>
              </Help>
            ) : (
              <Help color="danger">
                <b>Det ser ut som det er noe galt med epostadressen du skrev</b>
              </Help>
            )}
          </Control>
        </Field>

表单验证中的“超出最大更新深度”

2 个答案: