如何仅当任一cartItem的productDetails.tax为true时显示<div>？

原代码的核心问题是误用了indexOf方法——它无法检查数组对象中嵌套属性的布尔值。要实现“任一购物车项的productDetails.tax为true时显示div”的需求，应该使用数组的some()方法来遍历判断：

const Content = (props) => {
  // 遍历购物车数组，检查是否存在tax为true的项
  const hasTaxItem = props.cartItem.some(item => item.productDetails?.tax === true);

  return (
    <>
      {hasTaxItem && (
        <div>
          Show if Tax
        </div>
      )}
    </>
  );
};

export default Content;

关键说明： #

• some()方法会遍历数组，只要有一个元素满足回调函数的条件，就返回true，完全匹配“任一”的需求
• productDetails?.tax中的可选链?.可以避免当某个购物车项没有productDetails属性时出现报错
• 拆分出hasTaxItem变量让逻辑更清晰，也便于后续维护

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