TypeError:无法读取undefined的quantity:数组填充错误致WhatsApp发送失败
问题分析
错误提示“无法读取undefined的'quantity'属性”,核心原因是你在cartProducts.map()循环里的变量作用域错误:
- 你把
let i = 0;定义在了循环内部,导致每次迭代map时,i都会被重置为0 - 所有商品数据都被重复赋值给
productos[0],最终productos数组只有第一个位置有值,后面的索引(比如1)对应的元素都是undefined - 循环内打印
productos[i]时,i每次都是0,所以看起来能正确输出,但实际上数组里只有一个元素
修复方案
1. 正确构建productos数组
不要手动维护索引i,直接利用map方法的返回值生成数组,这也是map的标准用法:
let productos: product[] = cartProducts.map((cp) => { const quantity = cp.quantity.toString(); return { quantity: quantity, title: cp.product?.title, option: cp.option, }; });
2. 动态生成WhatsApp消息内容
不要硬编码productos[0]、productos[1],用map+join遍历所有商品自动拼接内容,兼容任意数量的购物车商品:
const productMessages = productos.map(item => `${item.quantity} ${item.title ?? ''} ${item.option ?? ''}` ).join('\n'); return await Linking.openURL( `https://wa.me/${phone}?text=Hola, deseo hacer un pedido de los siguientes productos:\n${productMessages}` );
3. 增加空值防护(推荐)
避免cartProducts为空时访问cartProducts[0]报错,在开头补充判断:
if (cartProducts.length === 0) { Alert.alert("Aviso:", "Tu carrito está vacío", [ { text: "Ok", onPress: () => console.log("Ok Pressed"), style: "default" }, ]); subscriptioncp.unsubscribe(); return; }
完整修复代码
const Pedir = async () => { const subscriptioncp = DataStore.observe(CartProduct).subscribe(); // 先判断购物车是否为空 if (cartProducts.length === 0 || totalPrice === 0) { Alert.alert("Aviso:", "Tu carrito está vacío", [ { text: "Ok", onPress: () => console.log("Ok Pressed"), style: "default" }, ]); subscriptioncp.unsubscribe(); return; } const userID = (await getCurrentUser()).userId; const shopID = cartProducts[0].product!.shopID; const shop = await DataStore.query(Shop, (s) => s.id.eq(shopID)); const phone: string = shop[0].phoneNumber; interface product { quantity: string; title: string | undefined; option: string | undefined | null; } // 正确构建productos数组 const productos: product[] = cartProducts.map((cp) => { const quantity = cp.quantity.toString(); return { quantity, title: cp.product?.title, option: cp.option, }; }); // 动态生成所有商品的消息内容 const productMessages = productos.map(item => `${item.quantity} ${item.title ?? ''} ${item.option ?? ''}` ).join('\n'); subscriptioncp.unsubscribe(); return await Linking.openURL( `https://wa.me/${phone}?text=Hola, deseo hacer un pedido de los siguientes productos:\n${productMessages}` ); };
内容的提问来源于stack exchange,提问作者Adrian
相关产品推荐
相关产品推荐

