Question

在我基于ajax调用的代码中，正在更改状态值。基于此，它必须显示Flash消息。在我的代码中，当状态更改时，它不显示即显消息。

代码：

class Login extends Component {
  constructor() {
    super();

    this.state = {
      email: "",
      password: "",
      email_error: "",
      password_error: "",
      showError: false,
      errorMessage: "Welcome",

    };

    this.login = this.login.bind(this);
    this.onChange = this.onChange.bind(this);
  }
 login() {
    if (this.validateForm()) {
      PostData("loginWeb", this.state).then(result => {
        let responseJson = result;
        if (responseJson !== undefined && responseJson.success === true) {
          sessionStorage.setItem("userData", JSON.stringify(responseJson));
          this.setState({ redirectToReferrer: true });
        } else if (
          responseJson !== undefined &&
          responseJson.success === false
        ) {
          this.setState({
            showError: true,
            errorMessage: responseJson.error
          });
        } else {
          this.setState({
            showError: true,
            errorMessage: "Invalid Credentials."
          });
        }
      });
    }
  }
render(){
 return {
<div className="flaseMsg text-center">
          <FlashMassage persistOnHover={true}>
            {this.state.showError && (
              <div className="alert alert-danger alert-flashMsg">
                {this.state.errorMessage}
              </div>
            )}
          </FlashMassage>
        </div>
}

}

请让我知道我错过了什么。预先感谢。

Answer 1

首先在渲染方法return {}中编写代码返回方法，将其返回此值不是很好：

render(){
 return (  
  <div className="flaseMsg text-center">
      <FlashMassage persistOnHover={true}>
        {this.state.showError && (
          <div className="alert alert-danger alert-flashMsg">
            {this.state.errorMessage}
          </div>
        )}
      </FlashMassage>
    </div>
)
}

根据react JS中的状态变化来更改元素的可见性

1 个答案: