reactjs - this.props.relay.setVariables 触发获取后加载指示器？

Question

我使用react-router-relay并且在我的一条 route 我有一个下拉菜单。

现在，我从该下拉列表中选择一个不同的值 - 这将调用 this.props.relay.setVariables ，它将根据此变量获取一些数据。该数据将显示在当前路线内的图表组件中。

我如何提供回调或其他东西来知道当前组件正在获取数据/现在已完成获取数据？

我需要它能够在图表组件顶部显示加载指示器。

我认为我不能为此使用 react-router-relay 因为它只能让我显示加载指示器而不是当前的路线 - 但我想在其中显示加载指示器当前路线。

请帮忙。

Answer 1

setVariables 方法采用第二个参数，即 onReadyStateChange 回调，可用于检测请求何时待处理以及何时完成或失败。

另请参阅setVariables docs和 guide to ready states - 基本上，readyState 是一个{aborted、ready、done、error、...} 的对象，您可以使用它来适本地更新 UI:

  this.props.relay.setVariables({...}, readyState => {
    if (readyState.done || readyState.aborted) {
      this.setState({loading: false});
    } else if (readyState.error) {
      this.setState({loading: false, error});
    }
  });