Question

我的组件和操作没什么问题。在我的组件内部，我传递（登录，密码）进行授权。然后在行动创建者我向我的服务器发出请求，并且当状态为i 200并且想要将用户推送到其他路径时例如＆＃34; /＆＃34;但这不行。

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

有什么想法吗？我使用react router v4。

我尝试了很多东西，（创建自己的历史记录），将道具中的功能从组件传递到动作。仍然没有工作..

Answer 1

您必须将所有内容都放在 BrowserRouter 中。请查看以下代码。

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

您将获取历史记录，并使用 this.props.history.push（＆＃39; you_path＆＃39;）; <来推送（） /强>

检查Bot Connector Service。

推送功能在Action内部不起作用

1 个答案: