2个使用&&的条件语句

Question

我有一个登录表单的错误对象，它有一个用户名、密码或两者都有错误。我想在一个 div 中显示所有错误。

我正在使用如下内联逻辑 && 运算符，但不确定如何使用它，因此它也会检查密码是否有错误。所以，我也需要 this.state.errors.password 在那里但不知道如何。

    {this.state.errors.username && (
      <Alert variant="danger">{this.state.errors.username}</Alert>
    )}

我试过了，但是当我应该将密码字段留空时没有显示错误消息

        {this.state.errors.username && this.state.errors.password && (
          <Alert variant="danger">
            {this.state.errors.username} {this.state.errors.password}
          </Alert>
        )}

Answer 1

你需要使用 or 运算符而不是 and。

{(this.state.errors.username || this.state.errors.password) && (
    <Alert variant="danger">
       {this.state.errors.username} {this.state.errors.password}
    </Alert>
)}

this.state.errors.username && this.state.errors.password 如果你使用 or 运算符，它会呈现错误两个字段都有错误

this.state.errors.username || this.state.errors.password 如果你使用 or 运算符，它将呈现错误任何字段都有错误。