Reactのフックの機能を使って、Shopifyのコンポーネントを「正しく動作させる」方法を教えてください。

Question

下記の質問についてご存知の方がいらっしゃいましたら、ご教示を願います。

【質問の主旨】

Reactのフックの機能を使って、Shopifyのコンポーネントを「正しく動作させる」方法を教えてください。ここでいう「正しく動作させる」という意味は、"Select Products" というボタンを押したときに、ResourcePickerというコンポーネントから商品の追加リストを表示させることです。

【質問の補足】

1. 自分が作成しているコード

自分のコードはShopifyがYouTubeで公開している動画の内容(index.js) を、下記のとおりそのまま写経しているつもりです。

import { useState } from "react";
import { Button, Card, DataTable, EmptyState, Heading, Page, Stack, TextField } from "@shopify/polaris";
import { ResourcePicker } from "@shopify/app-bridge-react";

const Index = () => {
  const [appendToTitle, setAppendToTitle] = useState('');
  const [appendToDescription, setAppendToDescription] = useState('');
  const [pickerOpen, setPickerOpen] = useState(false);
  const [products, setProducts] = useState([]);
  const [showToast, setshowToast] = useState(false);

  const productTableDisplayData = products.map(() => null);

  return(
    <Page>
      <Heading>Producter Updater App</Heading>
      <Card>
        <Card.Section>
          <Stack vertical>
            <TextField
              label="Append to title"
              value={appendToTitle}
              onChange={setAppendToTitle}
            ></TextField>
            <TextField
              label="Append to description"
              value={appendToDescription}
              onChange={setAppendToDescription}
              multiline={3}
            ></TextField>
            <ResourcePicker
              resourceType="Product"
              showVariants={false}
              open={pickerOpen}
              onSelection={(resources) => {
                console.log(resources);
                setProducts(resources);
              }}
            />
            <Button primary onClick={() => console.log('Clicked')}>Select Products</Button>
          </Stack>
        </Card.Section>
      </Card>
    </Page>
  );

}

export default Index;

index.js以外のファイルについてはGitHubで公開しています。

2. 自分が作成したコードの動作

自分が作成したコードは"Select Product"のボタンを押しても、ResourcePickerが動作して、商品の追加リストは表れません。またコンソールを調べても、特にエラーは発生しません。

3. useState（ステートフック）について

useState(ステートフック)で定義されているpickerOpenはfalseで初期化されています。そのfalse をResoucerPickerのプロパティ値の1つとして用いているので、自分が作成したindex.jsでは商品の追加リストが表れないことはなんとなく理解できます。

ただ同じコーディングをしているつもりであるにもかかわらず、動画のコーディングでは商品リストが表れることが理解できません。

---

以上、ご確認よろしくお願いします。

Answer 1

GitHubで公開しているコードの11行目で定義しているステートフックの引数をfalseとし、

const [pickerOpen, setPickerOpen] = useState(false);

78行目でResourcePickerのopenプロパティをpickerOpen とした上で

open={pickerOpen}

84行目で定義しているButtonのonClickプロパティ内で、setPickerOpen関数を使って、真偽値をtrueに変更すると

<Button primary onClick={() => setPickerOpen(true)}>Select Products</Button>

"Select Products"というボタンを押したタイミングで、ResourcePickerコンポーネントが「正しく」動作しました。