Question

在Redux操作文件代码中，当用户成功登录时，我试图实现history.push（'/ userfeed'）。但是，我不断收到以下错误：未处理的拒绝（TypeError）：无法读取属性'推送”。我在派遣前将控制台记录的历史记录记录在我的操作文件中，它显示为“未定义”。任何帮助将不胜感激。

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

//反应登录组件文件

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;

Answer 1

您的login函数期望一个对象具有其history属性，但是您要这样调用它：

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

应该像

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

Redux和React：未处理的拒绝（TypeError）：无法读取未定义的属性“ push”

1 个答案: