javascript - 如何在我的应用页面上从资源选择器呈现列表

Question

我开始学习 shopify 并通过 shopify cli create node app 创建了一个应用程序。我使用 Polaris 来渲染应用页面上的组件。而且我不知道如何从页面上的资源选择器中显示所选产品的列表。我可以通过map ()返回列表以某种方式做到这一点。

我的代码：

import { Page, Card, ResourceList } from '@shopify/polaris';
import { ResourcePicker } from '@shopify/app-bridge-react';

import { useState } from 'react';

const Index = () => {
  const [resources, setResources] = useState([]);
  const [open, setOpen] = useState(false);
  const handleSelection = (resources) => {
    setOpen(false);
    setResources(resources);
  };

  return (
    <Page
      title={'product selector'}
      primaryAction={{
        content: 'Select products',
        onAction: () => setOpen(true)
      }}>
      <ResourcePicker
        resourceType={'Product'}
        open={open}
        onCancel={() => {
          setOpen(false);
        }}
        onSelection={(resources) => {
          handleSelection(resources);
        }}/>
      <Card>
        <ResourceList
          resourceName={{singular: 'product', plural: 'products'}}
          items={resources}
          renderItem={}>

        </ResourceList>
      </Card>
    </Page>
  );
};

export default Index;