javascript - HOC Redux Dispatch 在子组件调用 React componentDidMount 后被调用

Question

我有一个高阶组件 (HOC)，用于授权和刷新用户 session 。

这是 RequireAuth HOC，它是 componentWillMount

componentWillMount() {
  console.log('HOC componentWillMount');
   // checks with authorizer that token is valid if not refresh token
    getUserFromLocalStorage()
      // update redux with new refresh token
      .then(data => {
        console.log('getUserFromLocalStorage')
        this.props.setUserToReduxState(data);
        console.log(
          'user sucess retrieved and user setUserToReduxState: ',
          data
        );
      })
      .catch(() => {
        logoutUserFromReduxState();
      });
  }
}

这是我的路由调用

<Route exact path="/devices" component={RequireAuth(Devices)} />

这是我的 Devices 组件的 componentDidMount

componentDidMount() {
  console.log('componentDidMount')
  // calls api
  this.loadData();
}

此子组件调用需要 token 的 API。 但是，当 token 刷新时，它会在设备组件中调用 API get 之前刷新，但是从 HOC 中的“.then” promise 返回的 redux 操作不会在子组件中的 api 调用之前更新 redux 状态.

有没有办法确保 token 在 child 尝试调用 API 之前已处于更新/还原状态？

Answer 1

我认为您可以在 HOC 中添加一个条件来不呈现您的“增强组件”——在您的情况下是设备，直到使用用户 token 解析 setUserToReduxState。只有在设置了用户的 token 后，您的设备组件才会呈现 loadDate 方法将被触发。

例如- 您可以将用户的状态映射到一个变量。如果用户不存在 - 不要呈现您传递给 HOC 的组件。

编辑:(添加代码片段)

// In your render method get the current user from redux - see  mapStateToProps functoion
render(){
    const { user } = this.props;
    return (
        return (
        <div>
            {
              user && user.token
              ? <Component {...this.props} />
              : null // Here you can replace this with spinner if you want..
            }
        </div>
      )
    )
}


const mapStateToProps = (state) => ({
    user: state.auth.user
})

现在，当用户被设置时，您的组件将重新呈现，并且当 token 被确定设置时，设备组件将触发 loadData 方法。