Question

我在反应中使用redux-form，我想在成功的服务器响应（res 200）后重定向到其他页面。这是我的类LoginForm的完整代码：

class LoginForm extends React.Component {

  state = {
      redirectToNewPage: false
    }

  handleSubmit=({email='',password=''})=>{
    let error={};
    let isError=false;
    if(email.trim()===''){
      error.email='Required';
      isError=true;
    }   
    if(password.trim()===''){
      error.password='Required';
      isError=true;
    }
    if(isError){
      throw new SubmissionError(error);
      }
    else{
        //this.setState({ redirectToNewPage: true });  // <--- it will redirect
        fetch('/auth', {
          method: 'POST',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            email: email,
            password: password,
          })
        })
        .then( function(res){
          console.log(res.status);
          if(res.status==200){
            console.log("REDIRECTING...");
            //this.setState({ redirectToNewPage: true }); // It will show error unknow function

          }
          else{
            console.log("ERROR");
          }
        })


      }
  }

  static propTypes={
    handleSubmit:React.PropTypes.func
  }

    render(){
      const {handleSubmit}=this.props;
      if (this.state.redirectToNewPage) {
       return (
               <Redirect to="/markers"/>
       )
      }
      return(
        <div className="container">
      <form className="form-login" onSubmit={handleSubmit(this.handleSubmit)}>
        <h2 className="form-login-heading">Login</h2>
          <Field name="email"  label="Email address"  component={renderField} type="email" placeholder="Email"/>
          <Field name="password"  label="Password"  component={renderField} type="password" placeholder="Password"/>
        <button className="btn btn-lg btn-primary btn-block" type="submit">Login</button>
      </form>
      </div>
    )
}

};

问题出在handleSubmit方法中。在fetch：

之后，我无法在.then中使用（this.setState（））

.then( function(res){
          console.log(res.status);
          if(res.status==200){
            console.log("REDIRECTING...");
            //this.setState({ redirectToNewPage: true }); // It will show error unknow function

          }
          else{
            console.log("ERROR");
          }

我收到了一个错误：

未捕获（承诺）TypeError：无法读取属性＆＃39; setState＆＃39;的未定义

你有什么想法怎么做？

Answer 1

虽然您在评论中得到了答案，但我觉得理解为什么会出现此错误非常重要。原因与Js中箭头与正常函数的具体使用有关。

每当你在JS中使用function关键字时，你正在创建一个新的上下文，只要你在所述函数中引用this，你就会引用该函数上下文。结果是该函数绑定了自己的this。

这是箭头功能在这些用例中很好的原因之一。使用=>语法将允许您使用不创建新上下文的函数，并保留对外部上下文的this的引用。所以它不绑定自己的this。

为了让您了解箭头功能的优点，我将向您展示如果没有它，您的代码将如何。

...
const that = this;

...

.then(function(res) {
  console.log(res.status);
  if(res.status==200){
    console.log("REDIRECTING...");
    that.setState({ redirectToNewPage: true });
  } else {
    console.log("ERROR");
  }
})

以前是一种广泛使用的模式，使用箭头功能你不再需要这样做了

.then((res) => {
  console.log(res.status);
  if(res.status==200){
    console.log("REDIRECTING...");
    this.setState({ redirectToNewPage: true });
  } else {
    console.log("ERROR");
  }
})

完整说明的好参考可以是here

Redux-form - 服务器响应后重定向

1 个答案: