Question

我在app.js的react项目中进行了api调用，正在发生的事情是一段时间后我从该API获得响应，直到那时我的其他使用此repsonse的组件都中断了，所以我必须确保除非未调用getSubscriptionStatusCallback，否则不要继续。

getSubscriptionStatus(context) {
    console.log('inside api');
    if (!context.userInfo || context.userInfo.UserIdentified === '0')
      return

    let cacheManager = new CacheManager({
      apiName: 'getSubscriptionStatus',
      cacheKey: CacheKeys.SubscriptionStatus(context, ''),
      loader: GetSubscriptionStatusApi.get,
      callback: this.getSubscriptionStatusCallback,
      ttlInSecs: 10
    })
    let params = {
      'OPXUserID': context.userInfo.OPXUserID,
      'ProductType': 'APPSTORE',
      'SiteID': context.siteProperties.SiteID,
    }
    cacheManager.getObject(context, '', params)
  }

  getSubscriptionStatusCallback =(json) => {
    let context = this.state.context
    context.subscriptionStatus = json
    this.setState({context: context})
    console.log("testing"+context.subscriptionStatus.StatusCode);
    console.log(this.className, 'getSubscriptionStatusCallback', context)
  }

Answer 1

您应该有条件地渲染需要api数据作为道具的组件。

hasReceivedData ? <Component> : ''

将“ hasReceivedData”设置为状态，并在生命周期方法“ componentDidMount（）”中触发api调用，然后在回调中更新状态。

为改善用户体验，您可以在数据加载之前显示一个微调器

hasReceivedData ? <Component> : '<Spinner>'

如何确保API调用在React中加载另一个页面之前完成

1 个答案: