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

Question

我开始学习React.js。所以说，我写的登录表单，当用户进入页面和主页，当用户成功登录，会告诉我们将向

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

• node_modules
• 公共
• SRC
  • 组件
    • Login.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状态，当你把它抓回来。