Блог

В коде файла действия Redux я пытаюсь реализовать history.push(‘/ userfeed’), когда пользователь успешно вошел в систему. Тем не менее, я продолжаю получать следующую ошибку: Необработанное отклонение (TypeError): не удается прочитать свойство ‘push’ неопределенного. Я консольно регистрирую историю в своем файле действий прямо перед отправкой, и она отображается как ‘неопределенная’. Любая помощь будет принята с благодарностью.

//Файл действия Redux

 export const login = ({email, password, history}) => dispatch =>{
  //Headers
  const config = {
    headers:{
      "Content-Type": "application/json"
    }
  };

  //Request data body to send
  const body = JSON.stringify({email, password});

  axios.post('/api/user/login/', body, config)
    .then(res => {
      dispatch({
      type: LOGIN_SUCCESS,
      payload: res.data
    })
    history.push('/userfeed')
  })
};
  

// Файл компонента входа в систему React

 class LoginPage extends Component{

  state = {
    email: '',
    password: '',
    msg: null
  };

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

  static propTypes = {
    isAuthenticated: PropTypes.bool,
    error: PropTypes.object.isRequired,
    login: PropTypes.func.isRequired,
    clearErrors: PropTypes.func.isRequired

  };

  componentDidUpdate(prevProps){

    const { error } = this.props;
    if(error !== prevProps.error){
      //Check for login error
      if(error.id === 'LOGIN_FAIL'){
        this.setState({
          msg: error.message
        })
      }else{
        //If not login fail error then set msg to null
        this.setState({
          msg: null
        })
      }
    }
  }

handleSubmit = (e) =>{
  e.preventDefault();
  const { email, password } = this.state;

  const user = {
    email,
    password
  }

  //Attempt to login
  this.props.login(user, this.props.history);
  this.props.clearErrors();

}

    render(){
      return(
      <div className="LoginPage">
        <div className="loginOuterContainer">
                <form name="form" onSubmit={this.handleSubmit}>
                    <div className="emailLabelInput">
                        <input type="text" className="login-form-control" name="email" placeholder="Email address" onChange={this.handleChange}/>

                    </div>
                    <div className="passwordLabelInput">
                        <input type="password" className="login-form-control" name="password" placeholder="Password" onChange={this.handleChange}/>
                    </div>
                    <div className="form-group">
                        <button className="login-btn">Log in</button>

                    </div>
                </form>
            </div>
          </div>
      )
    }
};

const mapStateToProps = state => ({
  isAuthenticated: state.auth.isAuthenticated,
  error: state.error
});
export default connect(mapStateToProps, {login, clearErrors})(LoginPage);
  

//App.js Файл

 class App extends Component{
  componentDidMount(){
    store.dispatch(loadUser());
  }
  render(){
  return(
  <Provider store={store}>
  <div className="App">
    <Router>
      <Switch>
        <Route exact path="/login" component={LoginPage}/>
        <Route exact path="/userfeed" component={UserFeed}/>
      </Switch>
    </Router>
  </div>
  </Provider>
);
}
};
export default App;
  

Ваша login функция ожидает объект, у которого есть history свойство, но вы вызываете его следующим образом:

   this.props.login(user, this.props.history);
  

Должно быть что-то вроде

   this.props.login({ user, password, history: this.props.history });