Javascript ReactJS-在渲染之前等待第三方脚本响应

我在我的前端应用程序中使用React和flow（带有railsapi后端）以与此项目类似的方式实现

仪表板只能由登录用户访问。为了做到这一点，J-Toker调用MyRails API并返回loggedIn用户（如果没有人是loggedIn，则返回loggedIn…），可以使用

Auth.User

访问该用户

因此，我将仪表板组件包装在AuthenticatedComponent中：

Dashobard.jsx

export default AuthenticatedComponent(Dashobard);

这是我的AuthenticatedComponent.jsx：

export default (ComposedComponent) => {
  return class AuthenticatedComponent extends React.Component {

    static willTransitionTo(transition) {
      if (!LoginStore.isLoggedIn()) {
        transition.redirect('/login', {}, {'nextPath' : transition.path});
      }
    }

  ...
}

最后是我的LoginStore.jsx代码：

import Auth from 'j-toker';

class LoginStore extends BaseStore {

  ...

  isLoggedIn() {
    return Auth.user.signedIn;
  }
}

除了手动刷新页面外，一切都很好。在这种情况下，Auth.user.signedIn返回未定义的，即使用户已登录并被重定向到登录页面。我发现问题来自这样一个事实：调用

LoginStore.isLoggedIn（）

时，

Auth.user

尚未加载，因为在本例中，

Auth.user

返回一个空对象，如果我稍等一下（使用基本

setTimeout

测试），它将返回loggedIn用户

我是React.JS新手（现在只使用了一个星期），我不知道如何处理这个问题。我读了很多文章，但还不能理解React.JS是如何使用的，尤其是与第三方插件（我在使用动画插件时也有很多问题，但这是另一个故事…）

有人能帮我吗

---

非常感谢：）

这是因为当您将配置传递给J-Toker时，库将检查存储的令牌。如果找到一个，它将使用API验证令牌。这就是为什么调用configure时，它将返回一个jquery延迟对象，该对象将在验证完成后解析，或者在没有存储令牌的情况下被拒绝。如果验证通过API，则将返回用户对象并在Auth.user中进行设置

通过遵循示例项目，您可以通过在解决延迟问题后渲染组件来解决此问题

var promise = Auth.configure({
  apiUrl: 'your-api-host'
});

promise.always(function() {
  router.run(function (Handler) {
   React.render(<Handler />, document.getElementById('content'));
  });
});

var promise=Auth.configure({
apiUrl:'您的api主机'
});
promise.always（函数（）{
router.run（函数（处理程序）{
React.render（，document.getElementById（'content'））；
});
});

发生这种情况是因为当您将配置传递给J-Toker时，库将检查存储的令牌。如果找到一个，它将使用API验证令牌。这就是为什么调用configure时，它将返回一个jquery延迟对象，该对象将在验证完成后解析，或者在没有存储令牌的情况下被拒绝。如果验证通过API，则将返回用户对象并在Auth.user中进行设置

通过遵循示例项目，您可以通过在解决延迟问题后渲染组件来解决此问题

var promise = Auth.configure({
  apiUrl: 'your-api-host'
});

promise.always(function() {
  router.run(function (Handler) {
   React.render(<Handler />, document.getElementById('content'));
  });
});

var promise=Auth.configure({
apiUrl:'您的api主机'
});
promise.always（函数（）{
router.run（函数（处理程序）{
React.render（，document.getElementById（'content'））；
});
});

谢谢您的回答。我现在无法测试这个，因为我把这个项目切换到Angular。但我会尽快尝试，我会让你知道的谢谢你的回答。我现在无法测试这个，因为我把这个项目切换到Angular。但我会尽快尝试，我会让你知道的