Реакция запросов с маршрутизатором в функции - PullRequest
Новая
       10

Реакция запросов с маршрутизатором в функции

0 голосов
/ 11 февраля 2019

Привет, я работаю над использованием маршрутизатора реакции после сообщения о запросе и у меня возникли некоторые проблемы. 

handleSubmit = event => {
event.preventDefault();
request.post(
  {
    url: 'http://localhost:8080/usernamepassword',
    json: true,
    body: {
      email: this.state.email,
      password: this.state.password
    }
  },
  function(err, httpResponse, body) {
    console.log(err);
    console.log(httpResponse);
    console.log(body);

    if (err) {
        this.props.history.push('/nosuccess');
    } else {
        this.props.history.push('/success');
    }
  }
);

Проблема с 

    if (err) {
        this.props.history.push('/nosuccess');
    } else {
        this.props.history.push('/success');
    }

Я знаю (по крайней мере, я думаю)что проблема с this.props не передается.

Полный код приведен ниже.Я работаю над помещением запроса в функцию стрелки (из @webdevdani).Узнай это прямо сейчас.

import React, {Component} from 'react';
import request from 'request';
import {Link, withRouter} from 'react-router-dom';
import '../Form.css';

class SignIn extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: '',
            password: ''
        };
    }

    handleChange = event => {
        this.setState({
            [event.target.id]: event.target.value
        });
    };

    handleSubmit = event => {
        event.preventDefault();

        request.post(
            {
                url: 'http://localhost:8080/signin',
                json: true,
                body: {
                    username: this.state.username,
                    password: this.state.password
                }
            },
            function (err, httpResponse, body) {
                console.log(err);
                console.log(httpResponse);
                console.log(body);
                if (err) {
                    this.props.history.push('/nosuccess');
                } else {
                    this.props.history.push('/success');

                }
            }
        );
    };

    render() {
        return (
            <div>
                <form id="login" className="form-content" onSubmit={this.handleSubmit}>
                    <h1 className="form-content-text-h1"> Sign In</h1>
                    <div className="padding10">
                        <div className="form-content-text-textbox"> EDIPI (DoD ID):</div>
                        <input type="text" className="input1" id="username" onChange={this.handleChange} required/>
                        <br/>
                        <br/>
                        <div className="form-content-text-textbox"> Password:</div>
                        <input type="password" className="input1" id="password" onChange={this.handleChange} required/>
                    </div>
                    <button type="submit" className="button1">
                        Sign In
                    </button>
                    <br/>

                    <Link to="/resetpassword" style={{textDecorationColor: '#26c6da'}}>
                        <h1 className="form-content-link-text">Sign In Assistance</h1>
                    </Link>

                    <br/>
                    <br/>

                    <h1 className="form-content-text-h1"> New Users </h1>

                    <Link to="/register">
                        <button className="button1" type="submit">
                            Register
                        </button>
                    </Link>
                </form>
            </div>
        );
    }
}

export default withRouter(SignIn);

Вот полный код.

1 Ответ

0 голосов
/ 11 февраля 2019

Похоже, что значение "это" не то, что вы ожидаете.Если вы измените объявление функции в аргументах request.post на функцию стрелки, оно должно иметь значение this для вашего компонента.Тогда у вас будет доступ к this.props

...