关于表单验证"Maximum update depth exceeded"

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>