React中forEach与at Hook不符合预期问题求助

原代码的核心错误 #

1. 条件判断逻辑错误：if (element = productIDArray) 是赋值操作而非比较，且逻辑上应判断当前购物篮元素（产品ID）是否存在于产品ID数组中，而非直接赋值。
2. 索引获取错误：productPriceArray.at(basket-1) 完全不符合逻辑——basket是数组，和数字做减法会得到NaN，这也是多元素时价格取错的根本原因。

修复后的代码（保留原拆分数组的思路） #

const [basket, addToBasket] = useState([]);
const productPriceArray = products.map(items => items.price);
const productIDArray = products.map(items => items.id);

const itemsInBasketEqualToProducts = [];
basket.forEach((productId) => {
  // 找到当前产品ID在productIDArray中的索引
  const index = productIDArray.indexOf(productId);
  // 索引存在时，推入对应价格
  if (index !== -1) {
    itemsInBasketEqualToProducts.push(productPriceArray[index]);
  }
});

const sum = itemsInBasketEqualToProducts.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  0
);

更高效的优化方案（无需拆分数组） #

拆分products为两个数组没必要，直接通过产品ID匹配原products对象中的价格，逻辑更清晰且性能更好：

const [basket, addToBasket] = useState([]);

// 直接遍历购物篮，匹配对应产品的价格并累加
const sum = basket.reduce((total, productId) => {
  const matchedProduct = products.find(item => item.id === productId);
  // 找到匹配产品时累加价格，否则加0
  return total + (matchedProduct?.price || 0);
}, 0);

说明 #

• 优化方案用reduce一步完成价格累加，省去中间数组的创建，代码更简洁。
• 使用?.可选链运算符避免找不到产品时的报错，兼容性不足的话可替换为matchedProduct ? matchedProduct.price : 0。

内容的提问来源于stack exchange，提问作者Cameron Austin