提交事件完成后 React.js 组件不会重新渲染

Question

我开始学习 React.js。因此，我编写了登录表单，当用户访问该页面时我们将显示该表单，而当用户成功登录时将显示主页。

基本上，我的项目结构是这样的：

• node_modules
• 公开
• 源
  • 组件
    • Lo​​gin.jsx
  • App.js
  • index.js

代码如下：

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import registerServiceWorker from './registerServiceWorker';
import 'antd/dist/antd.css';

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>, document.getElementById('root'));
registerServiceWorker();

App.js

import React from 'react';
import Home from './containers/Home';
import Login from './components/Login';

const App = () => (
    <Login />
);

export default App

Login.jsx

import React, { Component } from 'react';
import Home from '../containers/Home';

class Login extends Component {
    constructor(){
        super();
        this.state={
            username:'',
            password:''
        }
    }


    handleUsernameChanged(event){
        this.setState({username: event.target.value});
    }

    handlePasswordChanged(event){
        this.setState({password: event.target.value});
    }

    isAuthenticated(){
        var userInfo = localStorage.getItem('userInfo');
        if(userInfo != null)
        {
            return true;
        }else{
            return false;
        }
    }

    render() {
        const isAlreadyAuthenticated = this.isAuthenticated();

        return (
            <div>
            {isAlreadyAuthenticated ? <Home /> : 
                (
                    <div>
                        <div className="login">
                            <div className="login-brand bg-inverse text-white">
                                <img src="assets/img/logo-white.png" height="36" className="pull-right" alt="" /> Login Panel
                            </div>
                            <div className="login-content form-input-flat">
                                <h4 className="text-center m-t-0 m-b-20">Great to have you back!</h4>
                                <form>
                                <div className="form-group">
                                    <input type="text" text={this.state.username} onChange={this.handleUsernameChanged.bind(this)}  className="form-control input-lg" placeholder="User Name" />
                                </div>
                                <div className="form-group">
                                    <input type="Password" text={this.state.password} onChange={this.handlePasswordChanged.bind(this)}  className="form-control input-lg" placeholder="Password" />
                                </div>
                                <div className="row m-b-20">
                                    <div className="col-md-12">
                                        <button onClick={(event) => this.handleClick(event)} className="btn btn-lime btn-lg btn-block">Sign in to your account</button>
                                    </div>
                                </div>
                                </form>
                            </div>
                        </div>
                    </div>
                )
            }
            </div>
        );
    }

    handleClick(event){
        event.preventDefault();
        var apiBaseUrl = "http://localhost:51171/api/user/validate?user_name=" + this.state.username + '&user_password=' + this.state.password;
        console.log(apiBaseUrl);
        fetch(apiBaseUrl)
            .then((resp) => resp.json()) // Transform the data into json
            .then(function(data) {
                console.log(data);
                if(data[0].status === "1")
                {
                    localStorage.setItem('userInfo', JSON.stringify(data));
                    this.setState();
                }else{

                }
            })
    }
}


export default Login;

登录时遇到问题。登录成功，用户信息存储在 LocalStorage 中，但组件未重新渲染，主页未显示。 登录成功后手动刷新页面才会显示主页。

非常感谢您的善意建议。谢谢。

Answer 1

好吧，如果您想在单击提交按钮后重新渲染组件，则需要在提交表单时更改状态。我建议您将isAlreadyAuthenticated 保留在您所在的州。所以你的状态应该是这样的，

this.state={
            username:'',
            password:'',
            isAlreadyAuthenticated: false
        }

然后，当单击提交按钮时，将其设置为 true，以便根据您的逻辑重新渲染该组件并 hsown 主组件。所以你的句柄提交回调应该是这样的，

handleClick(event){
        event.preventDefault();
        var apiBaseUrl = "http://localhost:51171/api/user/validate?user_name=" + this.state.username + '&user_password=' + this.state.password;
        console.log(apiBaseUrl);
        fetch(apiBaseUrl)
            .then((resp) => resp.json()) // Transform the data into json
            .then(function(data) {
                console.log(data);
                if(data[0].status === "1")
                {
                    localStorage.setItem('userInfo', JSON.stringify(data));
                    // Update the state here, so it triggers a rerender of the component.
                    this.setState({isAlreadyAuthenticated, true})
                    this.setState();
                }else{

                }
            })
    }

当你取回它时，确保得到像this.state.isAlreadyAuthenticated 这样的状态。