获取数据未在前端显示

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

我不知道我在这里错过了什么

优惠券成分：

export default function Coupon({ coupon }) {

    const start = moment();
      const end = moment(coupon.validTill, 'DD MM YYYY');
      const diff = end.diff(start, "days")

       if (diff >= 0 ) {
  return (
    <div className="coupon-container">
    <div className="coupon">
          <div className="co-img">
            {coupon.photo && 
            <img className="couponLogo"
            src={coupon.photo} alt="" />}
          </div>
        <div className="content">
          <h2>{coupon.shopName}</h2>
          <h1>{coupon.title}</h1>
        </div>
        <div className="couponDesc">
          {coupon.desc}
        </div>
        <div className="coupon-row">
          <span id="cpnCode">{coupon.coupon}</span>
        <div className="bottom-row">
          <div className="couponValidity">
          <p></p> 
          </div>
        </div>
      
    </div>
    </div>

  );
      } else {
        return null;
      }
}

这就是页面应该显示该组件的数组的内容，我在控制台日志中获取数据，但它没有提取到前端

Answer 1

首先让我们添加一个键，看起来您要迭代的内容有一个

id

变量，所以

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

应该没问题。 有了你所拥有的时刻

const end = moment(coupon.validTill, 'DD MM YYYY');

我忘记了 API，但这看起来不太正确，因为

'DD MM YYYY'

通常会对其进行格式化，而您仍在尝试对其进行逻辑处理，所以摆脱它并使用

.format("DD MM YYYY")

对其进行格式化

而且，shop 似乎没有任何作为字符串的用途，也许只是不给它任何东西，所以它是未定义的，并且不会欺骗读者认为它在其生命周期中将保持为字符串。

const [shop, setShop] = useState();

我想知道您的

moment

逻辑是否导致

else

条件始终运行，实际上应该将 null 替换为

<p> No data or error</p>

之类的内容，这样就更明显了，您已经达到了这一点，并且没有没有其他 React 错误正在发生。