Question

class SecuredRoute extends Component {
  constructor(props) {
    super(props);
    this.state = {
      reputationNumber: 0,
    }

    this.getReputationNumber = this.getReputationNumber.bind(this);
  }

  componentWillUnmount() {
    this._isMounted = false;
  }

  componentWillMount() {
    this._isMounted = true;
    this.getReputationNumber();
  }

  getReputationNumber() {
    axios.get(`http://localhost:3000/api/userDatas/${getUserDataId()}`)
      .then(response => {
        const reputationNumber = response.data.reputationNumber;
        this._isMounted && this.setState({ reputationNumber });
      }).catch(err => console.log(err));
  }

  render() {
    const { component: Component, path } = this.props;
    const { reputationNumber } = this.state;
    return (
      <Route path={path} render={() => {
        console.log("reputationNumber: ", reputationNumber);
        if (isUserAuthenticated() && reputationNumber >= 500) {
          return <Component />
        }
        else {
          this.props.history.push('/login');
          return <div></div>
        }

      }} />
    );
  }
}


<SecuredRoute exact path='/tag/add' component={AddTag} />

我只是在做一个像这样的问答Web应用程序。我试图保护我的路由/ tag / add，用户具有信誉号，并且此组件检查用户是否已通过身份验证，并且信誉号> = 500（如果这样），则它将返回该组件，否则它将重定向到登录名。但是问题是在第一次渲染时我不知道用户的信誉号，它来自服务器，因此在这段时间之间，用户总是重定向到“ / login”，但是我希望用户访问/ tag / add如果他已通过身份验证并且信誉编号> = 500，则为组件。

任何帮助表示赞赏。

Answer 1

我一直在处理要处理但尚未收到的数据的显示方式，直到返回所需数据之前，它一直显示加载指示器。

添加标记以跟踪是否可以在组件状态下完成初始响应：

  constructor(props) {
        super(props);
        this.state = {
            reputationNumber: 0,
            loaded = false, //Add to init state
        }
        
        this.getReputationNumber = this.getReputationNumber.bind(this);
    }
    
  getReputationNumber() {
        axios.get(`http://localhost:3000/api/userDatas/${getUserDataId()}`)
            .then(response => {
                const reputationNumber = response.data.reputationNumber;
                this._isMounted && this.setState({ reputationNumber, loaded: true });
            }).catch(err => console.log(err));
    }

希望这会有所帮助！

确保路线反应？

1 个答案: