MeteorJS中react-router-dom下Accounts.createUser()重定向失效及setState报错求助

你遇到的问题其实是两个核心点：一是回调函数里的this上下文不对导致setState报错，二是异步回调里直接返回<Redirect />的方式根本不会触发页面跳转。我来一步步帮你解决：

第一步：修复this.setState is not a function报错 #

你在Accounts.createUser里用了普通函数作为回调，这会导致回调内部的this指向不再是你的React组件实例，自然调用不了setState。有两种简单的修复方式：

方式1：改用箭头函数作为回调 #

箭头函数会自动继承外部的this上下文，直接修改回调部分即可：

handleSubmit(event) {
  event.preventDefault();
  Accounts.createUser(
    { username: this.state.mobile, password: "123" },
    (err) => { // 这里换成箭头函数
      if (err) {
        console.log("err", err);
      } else {
        console.log("account created");
        this.setState({ redirect: true });
      }
    }
  );
}

方式2：提前绑定handleSubmit的上下文 #

在组件的构造函数里绑定this，或者用类属性箭头函数定义handleSubmit：

// 构造函数绑定写法
constructor(props) {
  super(props);
  this.state = { mobile: '', redirect: false };
  this.handleSubmit = this.handleSubmit.bind(this); // 绑定上下文
}

// 或者直接用类属性箭头函数定义方法
handleSubmit = (event) => {
  event.preventDefault();
  Accounts.createUser(
    { username: this.state.mobile, password: "123" },
    function(err) {
      if (err) {
        console.log("err", err);
      } else {
        console.log("account created");
        this.setState({ redirect: true });
      }
    }
  );
}

第二步：实现正确的页面重定向 #

解决this的问题后，还得调整重定向的逻辑——<Redirect />是React组件，只有在render方法里渲染它才会生效，不能在异步回调里直接返回。

方式1：用state控制渲染Redirect #

在组件的render方法里判断redirect状态，当状态为true时渲染跳转组件：

render() {
  // 如果redirect为true，直接渲染跳转组件
  if (this.state.redirect) {
    return <Redirect to="/" />;
  }

  // 否则渲染原来的表单内容
  return (
    <form onSubmit={this.handleSubmit}>
      <input 
        type="text" 
        value={this.state.mobile} 
        onChange={(e) => this.setState({ mobile: e.target.value })} 
        placeholder="输入手机号"
      />
      <button type="submit">创建账户</button>
    </form>
  );
}

方式2：直接调用history.push跳转 #

如果你用了react-router-dom的withRouter高阶组件（类组件）或者useHistory钩子（函数组件），可以直接调用history.push来跳转，不需要依赖state：

// 类组件需要先导入withRouter并包裹组件
import { withRouter } from 'react-router-dom';

class YourComponent extends React.Component {
  handleSubmit(event) {
    event.preventDefault();
    Accounts.createUser(
      { username: this.state.mobile, password: "123" },
      (err) => {
        if (err) {
          console.log("err", err);
        } else {
          console.log("account created");
          this.props.history.push("/"); // 直接调用跳转方法
        }
      }
    );
  }

  // ...其他组件代码
}

// 用withRouter包裹组件，让组件能拿到history属性
export default withRouter(YourComponent);

总结 #

先把this的上下文问题搞定，确保setState能正常调用，再通过state控制渲染<Redirect />或者直接调用history.push，就能解决账户创建后无法跳转的问题了。

内容的提问来源于stack exchange，提问作者Kane