在反应

Question

我有这个HOC组件，它检查用户是否有权重定向到某个路由，但我不知道如何以及在何处触发异步调用。

export default function CheckPermission(EnhancedComponent) {
  return class Redirect extends Component {

    render() {

      const special_member_token = '3453564' //hardcoded for temp

      const on_special_member_route = this.props.location.pathname.includes('special_member')

      if (getUserRole() === 'special_member' && !on_applied_route) {

        return <Redirect to={`/dashboard/special_member/${special_member_token}`} />
      }

      return <EnhancedComponent { ...this.props } />
    }
  }
}

在渲染中调用api是一种反模式，我应该在componentDidMount中进行吗？但是如果我在componentDidMount中调用，则渲染已经触发一次，如果重定向必须发生，我必须避免包装的组件被渲染。

Answer 1

您需要以两种方式触发异步调用：

1）componentWillMount - 尚未渲染的组件。 2）componentWillUpdate - 也许您的应用程序网址已更改，此组件会收到新的道具并将更新并需要检查用户权限