Как правильно перенаправить на js компонент и отправить информацию в db через php после нажатия кнопки Отправить?

Question

В настоящее время я нахожусь в Login.php.После нажатия submit я перенаправляюсь на Home.js без проблем, но никакая информация не отправляется в БД.

Однако, если я избавлюсь от перенаправления, тогда данные будут отправлены на БД без проблем, но это не перенаправит меня на Home.js.Вместо этого он перенаправляет меня на demo.php

Цель : Как я могу успешно перенаправить на Home.js (которым я сейчас являюсь) и одновременно отправлять данные в БД?

Что я делаю не так и как я могу это исправить?

Вот Login.js:

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

class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: "",
            password: "",
            redirect: false
        };
        this.submitForm = this.submitForm.bind(this);
    }

    submitForm(e) {
        e.preventDefault();
        const formData = new FormData();
        formData.append('json', JSON.stringify(this.state));

        fetch("http://localhost/demo_react/api/demo.php", {
            method: "POST",
            body: formData
        }).then((response) => {
            console.log(response);
        });

        this.setState({redirect: true})
    }

    render() {
        const go = this.state.redirect;

        if(go) return <Home/>;

        return (
                <form method="post">
                    <div className="form-group">
                        <label htmlFor="username">Email</label>
                        <input
                            className="form-control"
                            value={this.state.name}
                            type="text"
                            name="username"
                            onChange={e => this.setState({name: e.target.value})}
                        />
                    </div>

                    <div className="form-group">
                        <label htmlFor="password">Password</label>
                        <input
                            className="form-control"
                            type="password"
                            name="password"
                            onChange={e => this.setState({password: e.target.value})}
                        />
                    </div>

                    <button
                        className="btn btn-primary"
                        type="submit"
                        onClick={e => this.submitForm(e)}
                        value="Login"
                        name={"submit"}>Submit
                    </button>

                </form>
        );
    }
}

export default Login;

Вот demo.php:

$connection = mysqli_connect("localhost", "root", "", "loginapp");
$username = $_POST['username'];
$password = $_POST['password'];

if(isset($_POST['submit'])) {
    $query = "INSERT INTO users(username, password) ";
    $query .= " VALUES('$username', '$password')";

    $result = mysqli_query($connection, $query);

    if (!$result) {
        die("Query failed" . mysqli_error($connection));
    } else {
        echo "Data sent successfully to SQL";
    }
}

Answer 1

Fetch - это асинхронная функция, поэтому перенаправление запускается, когда отправка формы еще выполняется.Вероятно, вам следует установить состояние перенаправления после отправки ответа, поэтому здесь:

}).then((response) => {
            console.log(response);
            this.setState({redirect: true})
        });

И пока вы это делаете, вы должны проверить React Router и его компонент Redirect.Это лучший способ перенаправления.

// https://reacttraining.com/react-router/web/example/auth-workflow