在React中以更高阶组件触发异步调用

Question

I have this HOC component where it check if a user has privilege to be redirect to certain route, but I don't know how and where to fire async call.

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 } />
    }
  }
}

Call the api in render is an anti pattern, should I do it in componentDidMount ? But the render has already been trigger once if I call in componentDidMount , I have to avoid the wrapped component being render at all if the redirect have to happens.

Answer 1

You need to fire async call in two methods:

1) componentWillMount - component not rendered yet. 2) componentWillUpdate - maybe your app url changed and this component receive new props and will be update and need to check user priveleges