前端获取商家优惠券异常：接口正常但页面不显示

问题排查与修复方案 #

1. 修复优惠券请求的执行时机

ShopPage中获取优惠券的useEffect依赖为空数组，仅会在组件首次挂载时执行一次，若路由参数shopName发生变化，无法重新请求对应优惠券。同时修正控制台打印方式，避免对象转字符串导致的[object Object]：

useEffect(() => {
  const fetchShopCoupons = async () => {
    try {
      const response = await axios.get(`/coupons/${shopName}`);
      setCoupons(response.data);
      console.log("Shop Coupons are:", response.data); // 用逗号分隔正常打印对象
    } catch (err) {
      console.error("获取优惠券失败:", err);
    }
  };
  fetchShopCoupons();
}, [shopName]); // 添加shopName作为依赖，确保参数变化时重新请求

2. 修正优惠券过滤逻辑的异步状态错误

Coupons组件的filter函数中，误用了未完成更新的searchInput进行匹配（setSearchInput是异步操作），应直接使用当前输入的keyword：

const filter = (e) => {
  const keyword = e.target.value.toLowerCase();
  if (keyword !== '') {
    const filteredData = coupons.filter((coupon) => {
      return Object.values(coupon)
        .join('')
        .toLowerCase()
        .includes(keyword); // 使用实时的keyword而非异步更新的searchInput
    });
    setFilteredResults(filteredData);
  } else {
    setFilteredResults(coupons);
  }
  setSearchInput(keyword);
};

3. 同步优惠券数据与过滤结果

当父组件传入的coupons更新时，filteredResults未同步更新，导致初始状态为空数组无法渲染列表。添加监听逻辑：

useEffect(() => {
  // 优惠券数据更新时，重置过滤结果为全部优惠券
  setFilteredResults(coupons);
}, [coupons]);

4. 修正商家状态的初始值

Shop的初始状态设为空字符串""，会导致首次渲染时读取shop.shopName、shop.shopPic等属性报错，改为空对象：

const [shop, setShop] = useState({});

5. 完善加载状态逻辑

当前isLoading始终为false，在ShopPage中添加加载状态并传入Coupons组件：

// ShopPage中新增状态
const [isCouponsLoading, setIsCouponsLoading] = useState(false);

// 修改fetchShopCoupons函数
const fetchShopCoupons = async () => {
  setIsCouponsLoading(true);
  try {
    const response = await axios.get(`/coupons/${shopName}`);
    setCoupons(response.data);
    console.log("Shop Coupons are:", response.data);
  } catch (err) {
    console.error("获取优惠券失败:", err);
  } finally {
    setIsCouponsLoading(false);
  }
};

// 传递给Coupons组件
<Coupons coupons={coupons} isLoading={isCouponsLoading}/>

内容的提问来源于stack exchange，提问作者sultan.h