渲染组件

Question

我要验证用户身份。最初，当我从服务器收到用户输入“错误密码”的响应时，我正在尝试设置authPassword的状态。在render（）中，我正在检查authPassword的状态，并尝试显示“无效消息”。但是我无法重新渲染它以显示消息。

if(res === "wrongPassword")
{
     console.log(res);
     this.authPassword="password invalid";
     this.setState({authPassword});
}

render(){

        return <div className="base" >
                <div className="header">Login In</div>
                <div className="content">
                    <br/><br/>
                    <form className="form" method = 'post'>
                        <div className="form-group">
                            <input type="text" 
                                name="email"   
                                placeholder="email" 
                                className="form_field"
                                value={this.state.email}
                                onChange={this.handleChange}
                            >
                            </input>
                            {this.state.emailError? (
                            <div>
                            {this.state.emailError}
                            </div>
                            ):null

                            }
                        </div><br/>

                        <div className="form-group">
                            <input type="text" 
                                name="password" 
                                placeholder="Password" 
                                className="form_field"
                                value={this.state.password}
                                onChange={this.handleChange}
                                >
                            </input>
                            {this.state.passwordError? (
                            <div>
                            {this.state.passwordError}
                            </div>
                            ):null

                            }

                            {this.state.authPassword? (
                            <div>
                            {this.state.authPassword}
                            </div>
                            ):null

                            }         
                        </div><br/>
    {errors.form && <div className="alert alert-danger">{errors.form}</div>
                        }
                        <div className="form-group">
                            <div className = "btn">
                                <button type="button" 
                                    name="logbtn"
                                    disabled={isLoading}
                                    onClick = {this.handleSubmit}>
                                    Login
                                </button>
                            </div>
                        </div>
                    </form>   
                </div>
            </div>
        </div>
    }
}

Answer 1

这应该可以解决问题。

if(res === "wrongPassword")
    {
         console.log(res);
         const password="password invalid";
         this.setState({authPassword: password});
    }