获取数据未显示在前端

Question

我正在尝试从后端获取数据到前端，数据获取正常，并显示在控制台日志中，但未显示在前端

编码：

export default function ShopPage() {

  const [disable, setDisable] = useState(false);
  
  const [shop, setShop] = useState("");
  const shopName = useParams().shopName;

  const [shopCoupons, setCoupons] = useState([]);

  const { search } = useLocation();

  useEffect(() => {
    const fetchShop = async () => {
      const res = await axios.get(`/shops/${shopName}`);
      setShop(res.data);
      console.log(res.data);
    };
    fetchShop();
  }, [shopName]);
  
  
  useEffect(() => {
    const fetchShopCoupons = async () => {
      const response = await axios.get(`/coupons/${shopName}`);
      setCoupons(response.data);
      console.log("Shop Coupons are:", response.data);
    
    };
    fetchShopCoupons();
  }, [shopName]);
  
  return (
    <>
        <Box>
          <Stack>
        <Box >

        {shopCoupons.map(c => (
            
            <Coupon coupon={c} />
            
        ))}

        </Box>
        </Stack>
        </Box>
        
    </>
  )
}

我认为问题出在shopCoupons.map 我不知道我在这里遗漏了什么

Answer 1

您可以尝试添加密钥和吗？像优惠券组件

shopCoupons?.map((c, index) =>
 
  <Coupon coupon={c} key={index} />
);