This.Props.History.Push有效，但是帶我回到登錄頁面？

Question

我正在嘗試使用React JS，NodeJS，MySQL和Express創建一個應用程序...當我調用this.props.history.push（'/ list'）作為主頁時，獲得了具有憑據檢查功能的登錄頁面，但登錄后，它將打印頁面約0.5秒鍾，然后將我帶回到“登錄”頁面。

我不明白，我需要幫助：

class HomePage extends React.Component {
constructor(props) {
    super(props);

    this.state = {
        login: "",
        password: "",
        res: 1,
        msg: "",
        error: ""
    };
}

async fetchUsers() {
    console.log("BEGIN fetchUsers() Msg1 = " + this.state.msg);

    var url = 'http://192.168.1.33:8080/testuser/' + this.state.login + "/"
        + this.state.password;

    const response = await fetch(url);
    const json = await response.json();

    this.setState({
        res: json.Res,
        msg: json.Msg
    });

    console.log("json = " + json.Res);

    console.log("END fetchUsers(): Msg1 = " + this.state.msg
        + " Res = " + this.state.res);
    if (this.state.res === -1) {
        alert('Error in the credentials: ' + this.state.msg);
    } else {
        this.props.history.push("/list");
    }
}

componentDidMount() {
    console.log("BEGIN componentDidMount Msg1 = " + this.state.msg);
    console.log("END componentDidMount Msg1 = " + this.state.msg);
}

handleSubmit() {
    console.log("BEGIN handleSubmit Msg1 = " + this.state.msg);
    this.fetchUsers();
    console.log("END handleSubmit Msg1 = " + this.state.msg);
}

handleChange(event) {
    if (event.target.name === 'login') {
        this.setState({ login: event.target.value });
    } else {
        this.setState({ password: event.target.value });
    }
}

謝謝您的回答。

這是渲染功能：

render() {
    return (
        <div className="login">
            <section className="h-100">
                <div className="container h-100">
                    <div className="row justify-content-center h-100">
                        <div className="card-wrapper">
                            <div className="brand animated flipInX">
                                <img src="../styles/img/Epitech.png" alt="logo" />
                            </div>
                            <div className="card fat animated fadeIn">
                                <div className="card-body">
                                    <form onSubmit={event => this.handleSubmit()} className="my-login-validation" noValidate>
                                        <div className="form-group">
                                            <label htmlFor="email"> <i className="fas fa-envelope"></i> Email </label>
                                            <input id="login" type="email" className="form-control" name="login" required autoFocus autoComplete="off"
                                                onChange={this.handleChange.bind(this)} value={this.state.login} />
                                        </div>

                                        <div className="form-group">
                                            <label htmlFor="password"> <i className="fas fa-lock"></i> Password
                                                <a href="forgot.html" className="float-right">
                                                    Forgot Password ?
                                                </a>
                                            </label>
                                            <input id="password" type="password" className="form-control" name="password" required data-eye
                                                onChange={this.handleChange.bind(this)} value={this.state.password} />
                                            <div className="invalid-feedback">
                                                {this.state.error ? this.state.error.message : null}
                                            </div>
                                        </div>

                                        <div className="form-group">
                                            <div className="custom-checkbox custom-control">
                                                <input type="checkbox" name="remember" id="remember" className="custom-control-input" />
                                                <label htmlFor="remember" className="custom-control-label">Remember me</label>
                                            </div>
                                        </div>

                                        <div className="form-group m-0">
                                            <button type="submit" className="btn btn-primary btn-block" id="btn-submit">
                                                Login
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    );
}

Answer 1

該頁面正在刷新，因為您正在使用表單。 您需要阻止表單提交。 在您的句柄提交函數中使用event.preventDefault（）。

handleSubmit(event) {
    event.preventDefault()
    console.log("BEGIN handleSubmit Msg1 = " + this.state.msg);
    this.fetchUsers();
    console.log("END handleSubmit Msg1 = " + this.state.msg);
}

<form onSubmit={event => this.handleSubmit(event)}