React购物车组件useEffect条件判断失效，订单按钮异常显示求助

核心问题 #

你的代码存在两个关键问题导致Order按钮始终显示：

1. map返回的数组包含无效值：使用map时，当data.product_count > 0不成立时会返回false，最终list是一个包含false元素的数组，而非空数组。
2. 判断条件完全错误：useEffect里用list !== ""判断数组是否为空，数组和空字符串类型不同，这个比较永远返回true，所以无论购物车是否有商品，isFound都会被设为true。

优化方案 #

不需要额外的isFound状态和useEffect，直接通过过滤有效商品来判断是否显示按钮，代码更简洁高效：

1. 先过滤出product_count > 0的商品，再生成渲染列表，避免数组中混入false
2. 直接用过滤后的商品数量判断是否显示Order按钮

修改后的完整代码 #

import { useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import classes from "./Cart.module.css";

const Cart = () => {
  const navigate = useNavigate();
  const orders = useSelector((state) => state.data.DUMMY_DATA);

  // 先过滤有效商品，再生成渲染列表
  const filteredOrders = orders.filter(data => data.product_count > 0);
  const list = filteredOrders.map((data, key) => (
    <div className={classes.wrapper} key={key}>
      <div className={classes.item}>
        Item: &emsp;&emsp;{data.product_name}{" "}
      </div>
      <div className={classes.amount}>
        Amount:&emsp;&emsp; {data.product_count}{" "}
      </div>
      <div className={classes.price}>
        Price:&emsp;&emsp; {data.product_price}
      </div>
    </div>
  ));

  return (
    <div className={classes.modal}>
      <div className={classes.root}>
        <span
          className={classes.close}
          onClick={() => navigate("/", { replace: true })}
        >
          &times;
        </span>
        {list}
        {/* 直接用过滤后的商品数量判断 */}
        {filteredOrders.length > 0 && (
          <div className={classes.order_button_wrapper}>
            <button className={classes.order_button}>Order</button>
          </div>
        )}
      </div>
    </div>
  );
};

export default Cart;

关键改动说明 #

• 新增filteredOrders：用filter筛选出真正需要展示的商品，确保只有product_count > 0的项被保留
• 移除isFound状态和useEffect：不需要额外状态来维护，直接通过filteredOrders.length判断购物车是否有商品
• 修复map的key：给每个渲染项加上key属性，符合React的列表渲染规范

内容的提问来源于stack exchange，提问作者Ayan Khan