组件加载前设置CircularProgress加载器的问题排查

先解决await products()的运行时错误 #

你代码里声明了let products变量，又去调用products()函数，变量和函数重名导致调用时products是undefined，直接触发报错。先把变量名改掉，比如改成productElements。

修正加载状态逻辑 #

原useEffect里不管数据是否获取成功，最后都强制执行setLoading(true)，这会导致加载状态一直无法关闭。要调整为：获取到数据后设为false，就算请求出错也得关闭加载状态，避免页面一直转圈卡死。

调整渲染优先级 #

要实现“加载时只显示CircularProgress，加载完成后再处理产品列表/空状态”，得把加载状态的判断放在最前面，优先显示加载器，加载完成后再渲染后续内容。

修改后的完整代码：

import { useState, useEffect } from 'react';
import { CircularProgress, Col } from 'antd'; // 按需引入你使用的组件库

const ProductList = (props) => {
  const [loading, setLoading] = useState(true);

  // 变量名修改，避免和数据请求函数重名
  let productElements;
    
  useEffect(() => {
    (async () => {
      try {
        // 确保products()是你的合法数据请求函数
        const data = await products();
        // 数据获取成功后关闭加载状态
        if (data) {
          setLoading(false);
        }
      } catch (error) {
        // 请求出错也要关闭加载状态，避免卡死
        console.error('产品数据获取失败:', error);
        setLoading(false);
      }
    })();
  }, []);

  // 加载状态优先渲染
  if (loading) {
    return <CircularProgress />;
  }

  // 加载完成后处理产品列表或空状态
  if (props.productList && props.productList.length > 0) {
    productElements = props.productList.map((item, index) => {
      // 条件渲染符合要求的产品项
      return item.status === 1 ? (
        <Col key={item.id || index}> {/* 优先用item的唯一id当key，没有再用index */}
          <Product {...item} />
        </Col>
      ) : null;
    });
  } else {
    // 加载完成且无产品时显示空状态
    productElements = (
      <div>{/* 这里替换成你的空状态内容 */}</div>
    );
  }

  return <div>{productElements}</div>;
};

export default ProductList;

额外提醒 #

• 如果products()请求是用来更新父组件的productList，要确保父组件能正确传递更新后的props；如果是组件内部维护产品数据，建议在组件内新增products状态，把请求到的data存进去，而非依赖props。
• 尽量避免用index作为map的key，若产品项有唯一标识（如id），优先使用该标识，能提升渲染性能。

内容的提问来源于stack exchange，提问作者Kyle Underhill