ReactJS: Попытка визуализации нового экрана после входа в систему с помощью формы, получение данных из Express JSON

Question

Я не понял, как обновить страницу в моем приложении SPA после успешного входа в форму.Мне удается отправить данные в API из формы с помощью прокси-сервера, но API затем отвечает с помощью JSON user_ID, и мне нужен интерфейс React, чтобы проверить, что идентификатор есть, и затем отобразить следующий экран послеэкран входа в систему, но я не знаю, как отменить отображение экрана входа в систему и отобразить следующий.

Код ReactJS:

import React, { Component } from 'react'
import '../public/styles/App.css'
import Header from "./header.js"

var recID = []

export default class Login extends Component {

    constructor() {
        super()
        this.state = {
            isLoggedIn: false,
            user: []
        }

        this.checkLogin = this.checkLogin.bind(this)
    }

    checkLogin() {
        fetch('/api/user')
        .then(response => response.json())
        .then(user_id => this.setState({user: user_id}))
    recID = recID.concat(this.state.user)
    console.log(recID)
    console.log(recID.length)
    if (recID.length == 6) {
        this.setState({isLoggedIn: true})
    }
    }

    loginScreen() {
        return(   
            <div style={{border:"none"}}>
                <div style={{background:"white"}}>
                <br></br>
                    <center><Header /></center>
                <br></br>
            </div>
            <br></br>
            <br></br>
            <div style={{background:"white"}}>
                <center><form action='/api/login' method="POST" onSubmit={this.checkLogin()}>
                    <br></br>
                    Username: <br></br>
                    <input type = "text" name= "username"></input>
                    <br></br>
                    <br></br>
                    Password: <br></br>
                    <input type = "text" name = "password"></input>
                    <br></br>
                    <br></br>
                    <input type = "submit" value = "Log-in"></input>
                    <br></br>
                </form></center>
                <br></br>
            </div>
        </div>
    )
}

    success() {
        return (
            <div>
              <p>TEST</p>
              {this.state.user && this.state.user.map(us => <div key={us.user_id}>{us.user_id} </div>)}
            </div>
          )
    }

    render() {
            if (this.state.isLoggedIn == true) {
                return (
                    this.success()
                )
            }
            else {
                return (
                    this.loginScreen()
                )
            }
    }
}

Соответствующий код Express NodeJS:

...

app.post("/api/login", async(req, res) => {
    console.log(req.body)
    const id = await users.login(req.body.username, req.body.password)
    console.log(id)
    currentID = currentID.concat(id)
})

app.get("/api/user", async(req, res) => {
    res.json(currentID)
    currentID = []
})

Вместо целой страницы у меня есть тестовый пример.Будем очень благодарны за любые советы о том, как изменить рендеры после события!

Answer 1

В форме просто удалите действие и метод.просто позвоните

 onSubmit={ev => this.checkLogin(ev)}

Затем, будьте осторожны с этой частью вашего кода

fetch('/api/user')
        .then(response => response.json())
        .then(user_id => this.setState({user: user_id}))
    recID = recID.concat(this.state.user)

this.setState () является асинхронным.вы должны сделать это следующим образом:

fetch('/api/user')
        .then(response => response.json())
        .then(user_id => this.setState(
{user: user_id},
() =>  recID = recID.concat(this.state.user)))

Кроме того, сделайте ev.preventDefault () внутри функции checkLogin.

Answer 2

Несколько проблем здесь.

Удалить action='/api/login' method="POST" из <form>

Измените свой onSubmit={this.checkLogin} на ссылку на функцию вместо ее вызова.

Добавить e.preventDefault()в checkLogin(e), и это должно решить вашу проблему.

Измените выборку для обработки примера POST

из MDN: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

fetch(url, {
  method: 'POST', // or 'PUT'
  body: JSON.stringify(data), // data can be `string` or {object}!
  headers:{
    'Content-Type': 'application/json'
  }
})

Наконец, вам нужно изменитьВаши входные данные для элементов управления React следуют приведенному ниже примеру: https://reactjs.org/docs/forms.html Из которого вы будете использовать значения и передавать их для извлечения в качестве полезных данных.

Что происходит, когда вы отправляете форму и триггеры формы POST к действию URLкоторый вызывает перезагрузку браузера.

import React, { Component } from 'react'
import '../public/styles/App.css'
import Header from "./header.js"

var recID = []

export default class Login extends Component {

    constructor() {
        super()
        this.state = {
            isLoggedIn: false,
            user: []
        }

        this.checkLogin = this.checkLogin.bind(this)
    }

    checkLogin(e) {
    e.preventDefault()
        fetch('/api/user')
        .then(response => response.json())
        .then(user_id => this.setState({user: user_id}))
    recID = recID.concat(this.state.user)
    console.log(recID)
    console.log(recID.length)
    if (recID.length == 6) {
        this.setState({isLoggedIn: true})
    }
    }

    loginScreen() {
        return(   
            <div style={{border:"none"}}>
                <div style={{background:"white"}}>
                <br></br>
                    <center><Header /></center>
                <br></br>
            </div>
            <br></br>
            <br></br>
            <div style={{background:"white"}}>
                <center><form onSubmit={this.checkLogin}>
                    <br></br>
                    Username: <br></br>
                    <input type = "text" name= "username"></input>
                    <br></br>
                    <br></br>
                    Password: <br></br>
                    <input type = "text" name = "password"></input>
                    <br></br>
                    <br></br>
                    <input type = "submit" value = "Log-in"></input>
                    <br></br>
                </form></center>
                <br></br>
            </div>
        </div>
    )
}

    success() {
        return (
            <div>
              <p>TEST</p>
              {this.state.user && this.state.user.map(us => <div key={us.user_id}>{us.user_id} </div>)}
            </div>
          )
    }

    render() {
            if (this.state.isLoggedIn == true) {
                return (
                    this.success()
                )
            }
            else {
                return (
                    this.loginScreen()
                )
            }
    }
}

Remove action='/api/login' method="POST" from <form>

Add e.preventDefault() in CheckLogin and that should resolve your issue.