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

Question

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

TL:DR;

如何在从服务器异步获取数据之前阻止 React 组件呈现？ OR 让 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 应用尝试使用商店域的 Null 值连接到 Shopify，但一切都中断了。

我已经能够通过在第一次渲染时使用渲染函数 return Null 来防止这种情况，但这感觉有点老套

 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 方法应该看起来像这样：

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

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

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

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

当然你可以让render的return值随心所欲，也许在里面放一个loadingicon/animation，或者只是return一个空的<div>.

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

How can I prevent a Shopify Polaris React app from connecting to Shopify service too soon?

javascript

reactjs

asynchronous

shopify

polaris