0

当通过 setVariables 发出请求时，有没有办法考虑异步请求之间的本地状态，即实现加载指示器？

向https://www.graphqlHub.com/graphql提出请求的插图

  _onChange = (ev) => {
    this.setState({
      loading:true
    })
    let gifType = ev.target.value;
    this.props.relay.setVariables({
      gifType
    });
    this.setState({
      loading:false
    })
  }

这不会跟踪加载状态，并且加载将立即传递给 false，而对视图的异步更改将有延迟。

如果我们将加载移动到 setVariables 有没有办法跟踪响应？在根容器中，可以通过以下方式跟踪响应

  renderLoading={function() {
    return <div>Loading...</div>;
  }}

有没有类似的方法Relay.createContainer

使用 setVariables 浏览数据集是不好的做法吗？

完整代码

class GiphItems extends React.Component {
  constructor(){
    super();
    this.state = {
      loading: false
    }
  }
  render() {
    const random = this.props.store.random
    return <div>
      <select onChange={this._onChange.bind(this)} value={this.props.relay.variables.gifType}>
        <option value="sexy">Sexy</option>
        <option value="cats">Cats</option>
        <option value="goal">Goal</option>
        <option value="lol">LOL</option>
      </select>
      {this.state.loading ? 'LOADING' : <a href={random.url}><img src={random.images.original.url} className="img-responsive"/></a>}
    </div>;
  }

  _onChange = (ev) => {
    this.setState({
      loading:true
    })
    let gifType = ev.target.value;
    this.props.relay.setVariables({
      gifType
    });
    this.setState({
      loading:false
    })
  }
}
GiphItems = Relay.createContainer(GiphItems, {
  initialVariables: {
    gifType: "sexy"
  },
  fragments: {
    store: () => Relay.QL`
      fragment on GiphyAPI {
        random(tag: $gifType ) {
            id
            url
            images {
              original {
                url
              }
            }
            }
      }
    `,
  },
});
4

2 回答 2

0

好问题。在处理特定组件的加载屏幕方面，您拥有的是一个可行的选择。但这可能成为为每个单独组件的每个加载场景实施的负担。

如果要提供更通用的解决方案，您可以执行以下操作：您可以在 React 应用程序中设置一个全局事件系统，该系统将根据是否进行调用向每个组件广播全局状态。对于您需要的每个组件，您可以从 订阅此全局事件componentDidMount()并取消订阅componentWillUnmount()。一旦您的组件看到此全局状态发生变化，该组件应调用setState()，这将确定该组件是否应显示加载场景。

这是学习如何在组件之间进行通信以建立全局事件系统的好资源： https ://facebook.github.io/react/tips/communicate-between-components.html

您也可以使用 Facebook 的 Flux 来实现这一点： https ://facebook.github.io/flux/

希望这可以帮助！

于 2016-07-17T04:18:47.937 回答
0

setVariables方法还接受一个回调作为第二个参数，该参数响应与数据完成有关的事件，并接收一个您可以检查的“readyState”对象：

this.props.relay.setVariables({
        gifType,
      }, (readyState)=> {
        if (!readyState.done) {
          this.setState({
            loading: true
          })
        } else if(readyState.done) {
          this.setState({
            loading: false
          })
        }
})
于 2016-07-17T18:31:42.337 回答