推功能不工作內部行動

我有我的組件和行動小問題。在我的組件我通過（登錄，密碼）授權。然後在動作創建者我向我的服務器發出post請求，並且當狀態i 200並且想要將用戶推送到其他路徑例如「/」但這不會工作。推功能不工作內部行動

import React, { Component } from 'react'; 
import { Field, reduxForm } from 'redux-form'; 
import * as actions from '../../actions'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 

class Signin extends Component{ 

constructor(props){ 
super(props); 
this.state= {}; 
this.onSubmit = this.onSubmit.bind(this); 
} 

renderField(field){ 
    return(
    <div className="form-group"> 
     <label>{field.label}</label> 
     <input 
      className="form-control" 
      type="text" 
      {...field.input} 
      /> 

    </div> 
    ); 
} 

onSubmit(e){ 
    e.preventDefault(); 
    let {username,password} = this.state; 
    this.props.actions.signinUser({username,password}); 
    this.setState({ 
     username: '', 
     password: '' 
    }) 
} 




render(){ 
    let {username,password} = this.state; 


    return(
     <form onSubmit={this.onSubmit}> 

      <Field 
       label="Username:" 
       name="username" 
       component={this.renderField} 
       onChange={e => this.setState({username: e.target.value})} 
      /> 
      <Field 
       label="Password:" 
       name="password" 
       component={this.renderField} 
       onChange={e => this.setState({password: e.target.value})} 
      /> 
      <button action="submit" className="btn btn-primary"> Sign In 
</button> 
     </form> 

    ); 
} 
} 


function mapStateToProps(state) { 
return { form: state.form }; 
} 

const mapDispatchToProps = (dispatch)=> { 
return { 
    actions : bindActionCreators(actions , dispatch) 
}; 
} 

Signin = connect(
mapStateToProps, 
mapDispatchToProps 
)(Signin); 

export default reduxForm({ 
form: 'signin' 
})(Signin);

import axios from 'axios'; 



export function signinUser({username,password}){ 
return function(dispatch){ 

    axios.post('http://localhost:8585/auth', { username, password}) 
    .then(response => { 

      this.context.history.push('/'); or history.push('/'); 
      also tried `this.props.history`? 

     localStorage.setItem('token', response.data.token); 
     console.log("ok"); 

     }) 
     .catch(() => { 
     console.log("not ok"); 
     }); 
    }; 

}

class App extends Component { 
render() { 
return (
    <Router> 
     <div className="container"> 
     <Header /> 
     <Route exact path="/" component={Home} /> 
     <Route path="/signin" component={SignIn} /> 
     <Route path="/about" component={About} /> 
    </div> 
    </Router> 
); 
} 
}

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Provider } from 'react-redux'; 
import { createStore,applyMiddleware } from 'redux'; 

import './index.css'; 
import App from './components/App'; 
import registerServiceWorker from './registerServiceWorker'; 
import reducers from './reducers'; 
import reduxThunk from 'redux-thunk' 

const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore); 


ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}> 
<App /> 
</Provider> 

, document.getElementById('root')); 
registerServiceWorker();

任何想法？我使用反應路由器v4。

我嘗試了很多東西，（創建自己的歷史），將道具中的功能從組件傳遞到動作。仍然不工作..

來源

2017-10-09 ktostamtakidziwny

你在哪裏寫history.push（）？ –

對不起，我編輯帖子。我嘗試推後localstorage.setkey – ktostamtakidziwny

我不這麼認爲，你可以在axios API調用內使用歷史對象。這也不是一個可取的方法。相反，你可以在'componentWillRecieveProps'中做到這一點。你可以檢查'localStorage'中的token是否存在，只需使用this.props.history.push（）重定向。你可以通過以下任何一種方式在react-router 4中重定向。https://stackoverflow.com/questions/42123261/programmatically-navigate-using-react-router-v4 –

你必須把所有東西在BrowserRouter。檢查下面的代碼。

<Provider store={configureStore()}> 
    <BrowserRouter> 
     <LocaleProvider locale={enUS}> 
      <Route path='/' component={App} /> 
     </LocaleProvider> 
    </BrowserRouter> 
</Provider>

你會得到歷史和使用this.props.history.push（ 'you_path'）使用推（）;

檢查React Router Documentation。

來源

2017-10-11 09:40:03 Mushfiq

推功能不工作內部行動

回答

相關問題