Почему моя форма не передает информацию о пользователе в базу данных? - PullRequest
0 голосов
/ 19 апреля 2020

Я хотел бы знать, что не так в моем коде, с точки зрения того, почему он не отправляет имя пользователя, адрес электронной почты и пароль в мою базу данных через запрос POST Ax ios. Моя Laravel конечная точка работает нормально, потому что я проверил через PostMan. Я просто борюсь с частью переднего конца этого. Что я делаю не так и как я могу это исправить?

В браузере появляется сообщение об ошибке: Cannot POST /register

import React, {Component} from 'react';
import axios from "axios";

class Register extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: "",
            email: "",
            password: ""
        };
        this.userNameHandler = this.userNameHandler.bind(this);
        this.emailHandler = this.emailHandler.bind(this);
        this.passwordHandler = this.passwordHandler.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    userNameHandler(e) {
        this.setState({
            username: e.target.value,
        });

        console.log(this.state.username);
    }

    emailHandler(e) {
        this.setState({
            username: e.target.value,
        });

        console.log(this.state.email);
    }

    passwordHandler(e) {
        this.setState({
            username: e.target.value,
        });

        console.log(this.state.password);
    }

    handleSubmit(e) {
        const user = {
            name: this.state.name,
            email: this.state.email,
            password: this.state.password
        }

        this.setState({
            username: e.target.value
        });

        axios.post('http://127.0.0.1:8000/api/auth/signup', user)
            .then(response => {
                console.log(response);
                console.log(response.data);
            });
    }

    render() {
        return (
            <div className="container">
                <div id="login-row" className="row justify-content-center align-items-center">
                    <div id="login-column" className="col-md-6">
                        <div id="login-box" className="col-md-12">
                            <form id="login-form" className="form" method="post" onSubmit={this.handleSubmit}>
                                <div className="form-group">
                                    <label htmlFor="username" className="text-info">Username:</label><br/>
                                    <input type="text" name="username" id="username" className="form-control" onChange={this.userNameHandler}/>
                                </div>
                                <div className="form-group">
                                    <label htmlFor="username" className="text-info">Email:</label><br/>
                                    <input type="text" name="username" id="username" className="form-control" onChange={this.emailHandler}/>
                                </div>
                                <div className="form-group">
                                    <label htmlFor="password" className="text-info">Password:</label><br/>
                                    <input type="text" name="password" id="password" className="form-control" onChange={this.passwordHandler}/>
                                </div>
                                <div className="form-group">
                                    <input type="submit" name="submit" className="btn btn-info btn-md"
                                           value="Submit"/>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default Register;

1 Ответ

0 голосов
/ 19 апреля 2020

Вы не позвонили e.preventDefault(), поэтому вы получаете регулярную отправку формы по URL-адресу, указанному в атрибуте action. У вас нет ни одного из них, но URL-адрес по умолчанию для отправки: текущий URL .

Запрос Ajax отменяется, когда браузер переходит с текущей страницы на загрузите новый (сервер говорит, что он не поддерживает запросы POST к этому URL).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...