如何防止 Shopify Polaris React 应用过早连接到 Shopify 服务？

Question

我是 react 新手，我正在尝试使用 React 和 Polaris React 套件构建一个基本的 Shopify 应用程序。

TL:DR;

在从服务器异步获取数据之前，如何防止 React 组件呈现？ 或 让 Polaris 应用连接到 shopify 服务的正确方法是什么？

完整说明

问题是渲染函数应该将存储域添加到<AppProvider/> 元素的属性中。 IE。 <AppProvider shopOrigin="https://user-store.myshopify.com"/> 但是，域名因使用该应用的商店而异。

鉴于 React 在客户端呈现，我需要向服务器发送请求以检索当前的商店域。但这会在应用程序渲染后发生：

render() {

    return (
      <AppProvider
        shopOrigin={this.state.shop} {/* Null when first rendered  */}
        debug={true}
      > ... </AppProvider>

这导致 Polaris 应用尝试使用 shop 域的 Null 值连接到 Shopify，然后一切都中断了。

我已经能够通过让渲染函数在第一次渲染时返回 Null 来防止这种情况发生，但这感觉有点 hacky

 render() {   

    if (typeof this.state.shop === 'undefined') {/* true on first render */}
      return null; { /* prevent rendering at this stage */ }

    return (
      <AppProvider
        shopOrigin={this.state.shop}
        debug={true}
      > 

这是我用来从服务器获取域的异步函数

 constructor() {
    super();

    this.state = {};
  }

  componentDidMount() {
    this.callApi()
      .then(res => this.setState(res))
      .catch(err => console.log(err));
  }

  callApi = async () => {
    const response = await fetch('/shopify/config');
    const body = await response.json();

    if (response.status !== 200) throw Error(body.message);

    return body;
  };

Answer 1

一种简单的方法是在组件的状态中保留'isLoading' 属性，该属性最初设置为true。

一旦您的组件完成获取所需的任何数据，请致电this.setState({isLoading: false})。

那么你的组件的渲染方法应该是这样的：

render() {
    const { isLoading } = this.state;

    if (isLoading) {
        return <span>loading...</span>
    }

    return <AppProvider {...props}/>
}

这样，您的应用在获取数据之前不会尝试连接到 Shopify 服务。

当然，您可以随意设置render 的返回值，可以在其中放一个加载图标/动画，或者只返回一个空的<div>。