0
私が反応すると、ログインページを作成しようとしています。私は、フォームを送信し、私は、ログインロジックを実行し、成功またはエラーデータをJSONオブジェクトを返すサーバー（PHP/symfonyの）にデータを送信します。ユーザデータが正しいとログインがOKであれば はその後、私は別のページに彼をリダイレクトする必要があります。私はstate.リダイレクトページ - reactJS
LoginComponent.js
import React, { Component } from 'react';
import axios from 'axios';
import { Redirect } from 'react-router';
import createBrowserHistory from 'history/createBrowserHistory';
import {Link} from 'react-router-dom';
const browserHistory = createBrowserHistory();
class LoginComponent extends Component {
constructor(props) {
super(props);
this.state = {
errors: {},
login:'',
password:'',
fireRedirect: false
};
this.processForm = this.processForm.bind(this);
}
processForm(event) {
event.preventDefault();
const login = this.state.login;
const password = this.state.password;
//TODO validation
const formData = { login:login, password:password };
axios.post('http://myweburl.org/app/web/login', formData, { headers: {'Accept': 'application/json'} })
.then((response) => {
if(response.data.success) {
this.setState({ fireRedirect: true })
}else if(response.data.error){
this.setState({
errors:response.data.error
});
}
});
}
handleLoginChange(e) {
this.setState({login: e.target.value});
}
handlePasswordChange(e) {
this.setState({password: e.target.value});
}
render() {
//const { fireRedirect } = this.state;
if(this.state.fireRedirect) {
return <Redirect to={'/obligation'}/>
}
return (
<div className="wrapper">
<div className="full-content">
<div className="login-page">
<div className="egz-logo"><img src={`/img/logo.png`} alt="MyEGZ" title="MyEGZ"/></div>
<form autoComplete="off" onSubmit={this.processForm}>
<div className="login-block">
<input type="text" name="login" value={this.state.login} onChange={this.handleLoginChange.bind(this)} placeholder="login" id="client-login"/>
</div>
<div className="login-block">
<input type="password" autoComplete="off" name="password" value={this.state.password} onChange={this.handlePasswordChange.bind(this)} placeholder="mot de passe" id="client-pwd"/>
</div>
<div className="login-block">
<input type="checkbox" name="remember-me" id="client-remember-me"/>
<label>Se souvenire de moi</label>
</div>
<div className="login-button-block">
<input type="submit" name="login-submit" id="login-submit" value="Connexion"/>
<div >
<Link key="forgot-pwd" to={`/login/forgetpassword`}>
mot de passe oubile
</Link>
</div>
</div>
</form>
</div>
</div>
</div>
);
}
}
export default LoginComponent;
App.js
import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import './index.css';
import { Router,Route } from 'react-router';
import createBrowserHistory from 'history/createBrowserHistory';
import Obligation from './components/obligation/ObligationComponent';
import Contacts from './components/contacts/ContactComponent';
import ContactPage from './components/contacts/ContactPage';
import LoginPage from './components/LoginComponent';
const browserHistory = createBrowserHistory();
function auth() {
axios.post('http://myweburl.org/app/web/checkLogin', { headers: {'Accept': 'application/json'} })
.then((response) => {
console.log(response);
if(response.data.success){
return true;
}else if(response.data.error){
return false;
}
});
};
const isAuthorized = auth();
ReactDOM.render(
<Router history={browserHistory}>
<div>
<Route exact path="/" component={() => <LoginPage isAuthorized={isAuthorized} />} />
<Route path="/obligation" component={() => <Obligation title="Obligations légales" isAuthorized={isAuthorized} style="home-header"/> }/>
<Route path='/contacts' component={() => <Contacts title="Contacts" isAuthorized={isAuthorized} style="contact-header" />} />
<Route path="/contact/:id" component={() => <ContactPage isAuthorized={isAuthorized} />}/>
</div>
</Router>,
document.getElementById("root")
);
私は正しいデータでフォームを送信すると、それは「正しいデータ {で成功を返すに反応し使用しています成功「：1、」データ「：{」clients_id「：」2" }} とloginComponentのAJAXの成功の印刷応答データそれはまた私を返しますこの -
console.log（response.data.success、this.state.fireRedirect）;
1真
しかし、リダイレクトが機能していません。私は間違って何をしていますか？