Question

我有一个更高阶的组件（HOC），用于授权和刷新用户会话。

这是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)} />

这是设备组件的componentDidMount

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

此子组件调用需要令牌的API。但是，当令牌得到刷新时，它会在设备组件中调用API之前刷新，但是从HOC中的'.then'承诺返回的redux操作不会在子组件中的api调用之前更新redux状态

在孩子尝试调用API之前，有没有办法确保令牌已经更新/还原状态？

Answer 1

我认为你可以在你的HOC中添加一个条件，不要渲染你的增强组件＆＃34; - 在您的情况下，设备直到使用用户的令牌解析setUserToReduxState。只有在设置用户令牌后，您的设备组件才会呈现，将触发loadDate方法。

e.g。 - 您可以将用户的状态映射到变量。如果用户不存在 - 请不要渲染您传递给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
})

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

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

1 个答案: