假设products.find(product => product.id === id)在循环的至少一次迭代中没有返回一个对象，也许可以包含一点防御性代码以确保price可用。

for (let id of selectedProducts) {

  // Get the object first
  const product = products.find(product => product.id === id);

  // If the product exists AND the price exists on the object
  // add it to the subtotal
  if (product?.price) subTotal += product.price;
}

字符串
举例来说：

const products = [
  { id: 1, name: 'potato', price: 2 },
  { id: 2, name: 'fish', price: 12 },
  { id: 3, name: 'gammon', price: 22 },
  { id: 4, name: 'radish', price: 1 }
];

const selectedProducts = [1, 3, 6];

let subtotal = 0;

for (const id of selectedProducts) {
  const product = products.find(product => product.id === id);
  if (product?.price) subtotal += product.price;
}

console.log(subtotal);

型
补充文件

• Optional chaining

在useEffect内部，在then块内部设置加载状态，以确保在取数据后立即设置加载状态

useEffect(() => {
    fetch("https://fakestoreapi.com/products", {
      next: {
        revalidate: 60,
      },
    })
      .then((res) => res.json())
      .then((json) => {
        setProducts(json);
        setLoading(false);
      });
    // ---- NOT HERE -----
    // setLoading(false);
  }, []);

字符串
然后计算loading==false之后的小计

let subTotal = 0;
  if (!loading && selectedProducts?.length) {
    for (let id of selectedProducts) {
      const price = products.find((product) => product.id === id).price;
      subTotal += price;
    }
  }

型