ReactJs:無法登錄，直到頁面被手動重繪

作為一個React Js的初學者，我正在嘗試一些簡單的專案以獲得實踐經驗，同時也是為了學習！因此，我通過觀看YouTube教程，用React js和WAMP服務器創建了一個登錄門戶。 在中間我經歷了一些錯誤，但不知何故，我設法把它們解決了，但在完成專案后，當我試圖用我在資料庫中給出的證書登錄時，回應和一切都很清楚，但點擊登錄按鈕后，該頁面沒有重定向到歡迎頁面，而是在手動重繪 后重定向到歡迎頁面。我無法確定我的代碼有什么錯誤。

LoginForm.js

import React from 'react';
import InputField from './InputField';
import SubmitButton from './SubmitButton';
import UserStore from './stores/UserStore';


class LoginForm extendsReact. Component {
  constructor(props) {
    super(props);
    this.state = {
      用戶名。"",
      密碼。"",
      buttonDisabled: false, buttonDisabled: "".
    }
  }

  setInputValue（屬性，val） {
    val = val.trim（）。
    if (val.length > 12) {
      return;

    }
    this.setState({
      [屬性]: val.

    })
  }

  resetForm() {
    this.setState({
      用戶名。"",
      密碼。""。
      buttonDisabled: false。


    })
  }

  async doLogin() {
    if (!this.state.username) {
      return;
    }
    if (!this.state.password){
      return;
    }

    this.setState({
      buttonDisabled: true.
    })

    try {
      let res = await fetch('/login', {
        方法。"post"。
        headers: {
          '接受'。'application/json',
          'Content-Type': 'application/json'.
        },
        body: JSON.stringify({
          用戶名。this.state.username。
          密碼。this.state.password
        })

      });

      let result = await res.json();
      if (result && result. succes) {
        UserStore.isLoggedIn = true;
        UserStore.username = result.username。
      }

      else if (result && result.succes ==false) {
        this.resetForm（）。
        alert(result.msg)。


      }


    } catch (e) {
      console.log(e)。
      this.resetForm（）。

    }
  }


  render() {
    return (
      <div className="loginForm">
        登錄
        <InputField
          type='text'/span>
          placeholder='用戶名'。
          value={this.state.username ? this.state.username : ''}.
          onChange={(val) => this.setInputValue('username', val)}。

        />

        <InputField
          type='password''密碼'。
          placeholder='密碼'
          value={this.state.password ? this.state.password 。''}。
          onChange={(val) => this.setInputValue('password', val)}。

        />

        <SubmitButton
          text={span class="hljs-string">'Log In'}/lt;提交按鈕
          disabled={this.state.buttonDisabled}。
          onClick={() => this.doLogin()}。
        />

      </div>
    );
  }
}


export default LoginForm;

SubmitButton.js

import React from 'react' 。


class SubmitButton extends React. Component {
  render() {
    return (
      <div className="submitButton">
        <按鈕
          className="btn
          type='submit'
          disabled={this.props.disabled}。
          onClick={() => this.props.onClick()}。
        >

          {this.props.text}


        </button>

      </div>
    );
  }
}


export default SubmitButton;

App.js

import React from 'react' ;
import { observer } from 'mobx-react'。
import UserStore from './stores/UserStore'/span>;
import LoginForm from ' ./LoginForm';
import SubmitButton from ' ./SubmitButton';
import './App.css';

class App extends React.Component {

  async componentDidMount（） {
    try {
      let res = await fetch('/isLoggedIn'/span>, {
        method: 'post',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'let result = await res.json();

      if (result && result.success) {

        UserStore.loading = false;
        UserStore.isLoggedIn = true;
        UserStore.username = result.username。
      }

      else {
        UserStore.loading = false;
        UserStore.isLoggedIn = false;

      }


    }
    catch (e) {

      UserStore.loading = false;
      UserStore.isLoggedIn = false;

    }
  }


  async doLogout（） {
    try {
      let res = await fetch('/logout'/span>, {
        method: 'post',
        headers: {
          'Accept': 'application/json',
          'Content-type': 'application/json'let result = await res.json();

      if (result && result.success) {


        UserStore.isLoggedIn = false;
        UserStore.username = ''/span>;
      }




    }
    catch (e) {

      console.log（e）。

    }
  }



  render() {
    if (UserStore.loading) {
      return (
        <div className="app"/span>>
          <div className='container'/span>>
            正在加載，請等待...

          </div>

        </div>/span>

      );
    }

    else {

      if (UserStore.isLoggedIn) {

        return (
          <div className="app"/span>>
            <div className='container'> 
              歡迎 {UserStore.username}

              <SubmitButton

                text={'Log Out'}。
                disabled={false}'}。
                onClick={()=>this.doLogout()}。

              />

            </div> 
          </div>/span>
        );

      }



      return (
        <div className="app">)
          <div className='container'> 

            <LoginForm />
          </div>/span>

        </div>
      );

    }
  }
}


export default observer（App）。

Router.js

const bcrypt = require（'bcrypt'）。


class Router {

    constructor(app, db) {
        this.login（app, db）。
        this.logout（app, db）。
        this.isLoggedIn（app, db）。
    }

    login(app, db) {
        app.post('/login', (req, res) => /span> {

            let username = req.body.username。
            let password = req.body.password。

            username = username.toLowerCase()。

            if (username.length > 12 || password.length > 12) {
                res.json（{
                    success: false,
                    msg: 'An error occured,please try again'.
                })
                return;


            }
            let cols = [username];
            db.query（'SELECT * FROM user WHERE username =? LIMIT 1', cols, (err, data, fields) =>  {

                if (err) {
                    res.json（{
                        success: false,
                        msg: 'An error occured,please try again'。

                    });
                    return;
                }
                if (data && data.length == 1) {
                    bcrypt.compare(password, data[0].password, (bcryptErr, verified) => /span>{
                        if (verified) {
                            req.session.userID = data[0].id。
                            res.json（{
                                success: true,
                                用戶名: data[0].用戶名。
                            })
                            return;

                        }
                        else {
                            res.json（{
                                success: false,
                                msg: 'Invalid Password'。
                            })
                        }
                    });
                } else {
                    res.json({
                        success: false,
                        msg: 'User not Found,please try again.!'.
                    })

                }

            });
        });

    }

    logout(app, db) {
        app.post('/logout',(req,res)=> {

            if(req.session.userID) {
                req.session.destroy()。
                res.json（{
                    success:true。
                })
                return true;
            }
            else{
                res.json（{
                    success:false。
                })
                return false;

            }
        })

    }
    isLoggedIn（app, db） {

        app.post('/isLoggedIn',(req,res)=>/span>{

            if(req.session.userID) {
                let cols =[req.session.userID] 。
                db.query（'SELECT * FROM user WHERE ID=? LIMIT 1',cols,(err,data,field) => {

                    if(data && data.length ==1){
                        res.json（{
                            success:true。
                            用戶名:data[0].用戶名。
                        });
                        return true。
                    }
                    else{
                        res.json（{
                            success:false。
                        });
                    }

                });
            }
            else{
                res.json（{
                    成功:假
                })
            }

        });



    }

}

module.exports = Router;

uj5u.com熱心網友回復：

在LoginForm.js中，一切正常后，你在Userstore中保存了資料，它不會立即影響到App.js。在重繪 之后，Bot會顯示歡迎部分。因此，作為一個解決方案，我建議在LoginForm.js中使用state和props來處理它。

import React from 'react';
import InputField from './InputField';
import SubmitButton from './SubmitButton';
import UserStore from './stores/UserStore';


class LoginForm extendsReact. Component {
  constructor(props) {
    super(props);
    this.state = {
      用戶名。"",
      密碼。"",
      buttonDisabled: false, buttonDisabled: "".
    }
  }

  setInputValue（屬性，val） {
    val = val.trim（）。
    if (val.length > 12) {
      return;

    }
    this.setState({
      [屬性]: val.

    })
  }

  resetForm() {
    this.setState({
      用戶名。"",
      密碼。""。
      buttonDisabled: false。


    })
  }

  async doLogin() {
    if (!this.state.username) {
      return;
    }
    if (!this.state.password){
      return;
    }

    this.setState({
      buttonDisabled: true.
    })

    try {
      let res = await fetch('/login', {
        方法。"post"。
        headers: {
          '接受'。'application/json',
          'Content-Type': 'application/json'.
        },
        body: JSON.stringify({
          用戶名。this.state.username。
          密碼。this.state.password
        })

      });

      let result = await res.json();
      if (result && result. succes) {
        UserStore.isLoggedIn = true;
        UserStore.username = result.username。
        this.props.setIsLoggedIn(true)。
//------^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^。
      }

      else if (result && result.succes === false) {
        this.resetForm（）。
        alert(result.msg)。


      }


    } catch (e) {
      console.log(e)。
      this.resetForm（）。

    }
  }


  render() {
    return (
      <div className="loginForm">
        登錄
        <InputField
          type='text'/span>
          placeholder='用戶名'。
          value={this.state.username ? this.state.username : ''}.
          onChange={(val) => this.setInputValue('username', val)}。

        />

        <InputField
          type='password''密碼'。
          placeholder='密碼'
          value={this.state.password ? this.state.password 。''}。
          onChange={(val) => this.setInputValue('password', val)}。

        />

        <SubmitButton
          text={span class="hljs-string">'Log In'}/lt;提交按鈕
          disabled={this.state.buttonDisabled}。
          onClick={() => this.doLogin()}。
        />

      </div>
    );
  }
}


export default LoginForm;

import React from 'react' /span>;
import { observer } from 'mobx-react';
import UserStore from './stores/UserStore'/span>。
import LoginForm from ' ./LoginForm';
import SubmitButton from ' ./SubmitButton';
import './App.css';

class App extends React.component {

  constructor（props） {
    super（props）。
    this.state = {
      isLoggedIn : UserStore.isLoggedIn。
    }
  }
//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  async componentDidMount（） {
    try {
      let res = await fetch('/isLoggedIn'/span>, {
        method: 'post',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'let result = await res.json();

      if (result && result.success) {

        UserStore.loading = false;
        UserStore.isLoggedIn = true;
        UserStore.username = result.username。
      }

      else {
        UserStore.loading = false;
        UserStore.isLoggedIn = false;

      }


    }
    catch (e) {

      UserStore.loading = false;
      UserStore.isLoggedIn = false;

    }
  }


  async doLogout（） {
    try {
      let res = await fetch('/logout'/span>, {
        method: 'post',
        headers: {
          'Accept': 'application/json',
          'Content-type': 'application/json'let result = await res.json();

      if (result && result.success) {


        UserStore.isLoggedIn = false;
        UserStore.username = ''/span>;
      }




    }
    catch (e) {

      console.log（e）。

    }
  }

  setIsLoggedIn = (isLoggedIn) =>  {
    this.setState（{isLoggedIn})
  }
//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^。

  render() {
    if (UserStore.loading) {
      return (
        <div className="app"/span>>
          <div className='container'/span>>
            正在加載，請等待...

          </div>

        </div>/span>

      );
    }

    else {

      if (this.state.isLoggedIn) {

        return (
          <div className="app"/span>>
            <div className='container'> 
              歡迎 {UserStore.username}

              <SubmitButton

                text={'Log Out'}。
                disabled={false}'}。
                onClick={()=>this.doLogout()}。

              />

            </div> 
          </div>/span>
        );

      }



      return (
        <div className="app">)
          <div className='container'> 

            <LoginForm setIsLoggedIn={this.setIsLoggedIn}/>/span>
          </div>/span>

        </div>/span>
      );

    }
  }
}


export default observer（App）。

uj5u.com熱心網友回復：

你必須改變LoginForm.js中的一些邏輯。你有多種方法可以做到這一點。我向你展示一個例子。

import React from 'react'/span>;
import InputField from './InputField';
import SubmitButton from './SubmitButton';
import UserStore from './stores/UserStore';

import {Redirect} from 'react-router-dom' //add a redirect from react-router-dom.


class LoginForm extends React。 Component {
  constructor(props) {
    super(props);
    this.state = {
      用戶名。"",
      密碼。"",
      buttonDisabled: false。
      redirectToRefer : false //add a state here for redirect 
    }
  }

  setInputValue(property, val) {
    val = val.trim（）。
    if (val.length > 12) {
      return;

    }
    this.setState({
      [屬性]: val.

    })
  }

  resetForm() {
    this.setState({
      用戶名。"",
      密碼。""。
      buttonDisabled: false。


    })
  }

  async doLogin() {
    if (!this.state.username) {
      return;
    }
    if (!this.state.password){
      return;
    }

    this.setState({
      buttonDisabled: true.
    })

    try {
      let res = await fetch('/login', {
        方法。"post"。
        headers: {
          '接受'。'application/json',
          'Content-Type': 'application/json'.
        },
        body: JSON.stringify({
          用戶名。this.state.username。
          密碼。this.state.password
        })

      });

      let result = await res.json();
      if (result && result. succes) {
        UserStore.isLoggedIn = true;
        UserStore.username = result.username。

        this.setState({redirectToRefer:true})/設定rediectToRefer為true。
      }

      else if (result && result. succes === false) {
        this.resetForm（）。
        alert(result.msg)。


      }


    } catch (e) {
      console.log(e)。
      this.resetForm（）。

    }
  }


  render() {

    //在渲染時添加一個條件，如果redirectToRefer為真，則重定向到你的頁面。
      if(redirectToRefer)
        {
           return <Redirect to ="/"/>
        }
    return (
      <div className="loginForm">
        登錄
        <InputField
          type='text'/span>
          placeholder='用戶名'。
          value={this.state.username ? this.state.username : ''}.
          onChange={(val) => this.setInputValue('username', val)}。

        />

        <InputField
          type='password''密碼'。
          placeholder='密碼'
          value={this.state.password ? this.state.password 。''}。
          onChange={(val) => this.setInputValue('password', val)}。

        />

        <SubmitButton
          text={span class="hljs-string">'Log In'}/lt;提交按鈕
          disabled={this.state.buttonDisabled}。
          onClick={() => this.doLogin()}。
        />

      </div>
    );
  }
}


export default LoginForm;

標籤：

上一篇：我想做一個C 的QString格式的列舉來顯示一個QTime

下一篇：無法使用Express.js添加頭檔案