时间戳

首页 > 解决方案 > Shopify ResourcePicker 未显示

shopify - Shopify ResourcePicker 未显示

问题描述

Polaris ResourcePicker 组件根本没有显示在我的嵌入式应用程序中，我不知道为什么。这是我的代码：

import React from "react";
import ReactDom from "react-dom";
import * as PropTypes from 'prop-types';

const session     = require('express-session');

import {AppProvider, Page } from '@shopify/polaris';
import {ResourcePicker} from '@shopify/app-bridge/actions';

class ExchangeApp extends React.Component {
  // This line is very important! It tells React to attach the `easdk`
  // object to `this.context` within your component.
  static contextTypes = {
    easdk: PropTypes.object,
  }; 

  state = {
    resourcePickerOpen: true,
  };

  render() {
    return <ResourcePicker
      resourceType="Product"
      open={this.state.resourcePickerOpen}
      onSelection={({selection}) => {
        console.log('Selected products: ', selection);
        this.setState({resourcePickerOpen: false});
      }}
      onCancel={() => this.setState({resourcePickerOpen: false})}
    />;
  }
}

ReactDom.render(
    <AppProvider apiKey="532cc1c7fa852e9bbf61c71bcbaa5a74">
      <ExchangeApp />
    </AppProvider>,
    document.querySelector('#root'),
  );

在浏览器的控制台中，我收到以下错误：

main.js:3584 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `ExchangeApp`.
at invariant (main.js:3584)
at createFiberFromTypeAndProps (main.js:13629)
at createFiberFromElement (main.js:13650)
at reconcileSingleElement (main.js:17327)
at reconcileChildFibers (main.js:17384)
at reconcileChildren (main.js:17753)
at finishClassComponent (main.js:18080)
at updateClassComponent (main.js:18018)
at beginWork (main.js:18864)
at performUnitOfWork (main.js:21679)

非常感谢您的帮助！

标签： shopifyshopify-apppolaris

解决方案

从 @shopify/polaris 导入 ResourcePicker，而不是从 easdk。

此外，您的渲染返回需要用括号括起来

return (<ResourcePicker.../>);

推荐阅读