在 Shopify 应用程序中显示产品时面临问题

Question

我刚开始自己学习Shopify App Development。 我在将产品列表显示到我的应用程序时遇到问题。 如果我将代码行 37 注释为 45，将代码 60 注释为 78，将 121 注释为 136，那么我会将数据接收到控制台日志中。 我不知道我哪里错了。

import React, { useEffect } from "react";
import {
  Card,
  Layout,
  Stack,
  Select,
  Button,
  ButtonGroup,
  IndexTable,
  useIndexResourceState,
} from "@shopify/polaris";
import { useState, useCallback } from "react";
import { useAppQuery, useAuthenticatedFetch } from "../hooks";

const SectionStepOne = () => {
  const [selected, setSelected] = useState("today");
  const [selected2, setSelected2] = useState("is");
  const [selected3, setSelected3] = useState("");
  const [loading, setIsLoading] = useState(false);

  const fetch = useAuthenticatedFetch();

  const handleSelectChange = useCallback((value) => setSelected(value), []);
  const handleSelectChange2 = useCallback((value) => setSelected2(value), []);

  const options = [
    { label: "Collections", value: "today" },
    { label: "Yesterday", value: "yesterday" },
    { label: "Last 7 days", value: "lastWeek" },
  ];

  const condition = [
    { label: "is", value: "is" },
    { label: "is not", value: "is not" },
  ];

  const { data, isLoading: isLoadingTrue } = useAppQuery({
    url: "/api/products",
    reactQueryOptions: {
      onSuccess: () => {
        setIsLoading(true);
      },
    },
  });
  console.log("Data", data);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch("/api/products");
        const data = await response.json();
        console.log("Data44444", data);
      } catch (err) {
        console.log("Error", err);
      }
    };
    fetchData();
  }, []);

  const { selectedResources } = useIndexResourceState(data);
  console.log("DATA!!!!!!!!!", data);

  const rowMark = () => {
    data.map(({ id, title, handle, vendor }, index) => (
      
      <IndexTable.Row
        key={id}
        id={id}
        position={index}
        selected={selectedResources.includes(id)}
      >
        <IndexTable.Cell>{title}</IndexTable.Cell>
        <IndexTable.Cell>{handle}</IndexTable.Cell>
        <IndexTable.Cell>{vendor}</IndexTable.Cell>
      </IndexTable.Row>
    ));
  };

  return (
    <Card>
      <Layout>
        <Layout.Section>
          <Stack>
            <Stack.Item></Stack.Item>
            <Stack.Item>
              <h2>Products must match all conditions</h2>
            </Stack.Item>
          </Stack>
        </Layout.Section>
        <Layout.Section>
          <Stack>
            <Stack.Item></Stack.Item>
            <Stack.Item>
              <Select
                options={options}
                onChange={handleSelectChange}
                value={selected}
              />
            </Stack.Item>
            <Stack.Item>
              <Select
                options={condition}
                onChange={handleSelectChange2}
                value={selected2}
              />
            </Stack.Item>
            <Stack.Item>
              <Select />
            </Stack.Item>
          </Stack>
        </Layout.Section>
        <Layout.Section>
          <ButtonGroup>
            <h1></h1>
            <h1></h1>
            <Button>Preview matched products</Button>
            <Button primary>Add product filter condition</Button>
          </ButtonGroup>
        </Layout.Section>
        <Layout.Section>
          <Card>
            <IndexTable
              itemCount={data.length}
              headings={[
                { title: "Title" },
                { title: "Handle" },
                { title: "Vender" },
              ]}
            >
              {rowMark}
            </IndexTable>
          </Card>
        </Layout.Section>
        <Layout.Section></Layout.Section>
      </Layout>
    </Card>
  );
};

export default SectionStepOne;

下面是我正在处理的项目的 git 链接。 GitHub

如果取消提交上述代码行，则整个 UI 将变为空白。 以下是我关注的 YouTube 视频的链接。 YouTube