新手开发者求助：Shopify应用产品列表显示异常问题

问题核心原因 #

取消注释后UI空白，本质是代码存在未处理的空值调用和函数未正确返回/调用，导致React渲染报错，进而整个组件崩溃。

具体错误点及修复方案 #

1. rowMark函数未返回渲染结果，且未正确调用
   原代码中rowMark仅执行data.map但未返回结果，且在IndexTable里只写了{rowMark}（引用函数而非调用）。
   修复：

   const rowMark = () => {
     // 先判断data是否存在，避免空值报错
     if (!data) return null;
     return 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>
     ));
   };
   

   同时在IndexTable中改为调用函数：

   {rowMark()}
   

2. 未处理data初始为空的情况
   组件初始化时，useAppQuery还未拿到数据，data为undefined，直接调用data.length、data.map、useIndexResourceState(data)都会报错。
   修复：

   • 使用useIndexResourceState时传入默认空数组：

     const { selectedResources } = useIndexResourceState(data || []);
     

   • itemCount改为空值兼容写法：

     itemCount={data?.length || 0}
     

   • 给列表区域加加载状态判断：

     {isLoadingTrue ? (
       <div>加载中...</div>
     ) : (
       <Card>
         <IndexTable ...>{rowMark()}</IndexTable>
       </Card>
     )}
     

3. 删除冗余的数据请求
   你已经通过useAppQuery请求数据，useEffect里的重复请求完全没必要，建议直接删除该useEffect块，避免数据冲突。

核心修复后代码片段 #

const SectionStepOne = () => {
  // 其他状态、函数保持不变

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

  // 空值兼容处理
  const { selectedResources } = useIndexResourceState(data || []);

  const rowMark = () => {
    if (!data) return null;
    return 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>
        {/* 其他UI部分保持不变 */}
        <Layout.Section>
          {isLoadingTrue ? (
            <div>加载中...</div>
          ) : (
            <Card>
              <IndexTable
                itemCount={data?.length || 0}
                headings={[
                  { title: "Title" },
                  { title: "Handle" },
                  { title: "Vender" },
                ]}
              >
                {rowMark()}
              </IndexTable>
            </Card>
          )}
        </Layout.Section>
      </Layout>
    </Card>
  );
};

验证方式 #

修复后取消所有注释，刷新页面：

• 控制台无空值报错
• 数据加载完成后产品列表正常渲染
• 加载过程显示"加载中"提示，避免UI空白

内容的提问来源于stack exchange，提问作者Vivek Viradia