Reactjs 使用功能中的路由器响应请求

嗨，我正在使用反应路由器后，一个请求后，我有一些问题

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');
    }

我知道，至少我认为问题在于这个。道具并没有通过

完整代码如下。我正在将请求放入@webdevdani的arrow函数中。现在就知道了

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);

---

这是完整的代码。

看起来“this”的值不是您期望的值。如果将request.post参数中的函数声明更改为箭头函数，则它应该具有组件的“this”值。然后你就可以访问这个。道具

你想发布什么，为什么？你能给我们多一点代码吗？还有你的组件和路由器是如何连接的？这是一个登录页面。我将用户名和密码发布到后端服务器。添加了SignIn.js@geraltdiesockehmm的完整代码。我只是在请求函数之前和中使用console.logthis。他们是不同的。函数中的this与post request.Right相关。您希望更改它，使新函数的作用域成为组件的作用域