删除订单按钮与添加饮品功能异常技术问询

一、采购历史订单删除后状态未更新 #

问题分析 #

点击删除按钮后，handleDeleteOrder函数已触发，但purchaseHistory状态未更新，订单仍保留。核心可能原因：

• 订单编号类型不匹配：filter时order.orderNumber与传入的orderNumber类型不一致（如数字vs字符串），导致过滤逻辑失效。
• 渲染依赖错误：订单列表渲染时未直接绑定purchaseHistory状态，而是使用了未同步的中间变量。

修复方案 #

1. 统一订单编号的类型，确保过滤逻辑生效：

const handleDeleteOrder = useCallback((orderNumber) => {
  console.log('Delete button pressed for order:', orderNumber);
  Alert.alert(
    "Delete Order",
    "Are you sure you want to delete this order?",
    [
      { text: "Cancel", style: "cancel" },
      { 
        text: "OK", 
        onPress: () => {
          console.log('Deleting order:', orderNumber);
          setPurchaseHistory(prevHistory => {
            // 强制统一类型后再比较
            const targetOrderNum = String(orderNumber);
            const updatedHistory = prevHistory.filter(order => String(order.orderNumber) !== targetOrderNum);
            console.log('Updated history:', updatedHistory);
            return updatedHistory;
          });
        }
      }
    ]
  );
}, [setPurchaseHistory]);

2. 确认订单列表渲染时直接使用purchaseHistory状态：

// 确保渲染逻辑直接依赖purchaseHistory
{purchaseHistory.map(purchase => (
  <View key={purchase.orderNumber}>
    {/* 订单内容 */}
    <TouchableOpacity
      style={styles.deleteButton}
      onPress={() => handleDeleteOrder(purchase.orderNumber)}
    >
      <Text style={styles.deleteButtonText}>Delete</Text>
    </TouchableOpacity>
  </View>
))}

二、饮品规格选择后UI无响应 #

问题分析 #

handleAddDrink函数已触发，但selectedDrink和selectedDrinkSize状态更新后，选中样式未生效。核心原因是引用类型的全等比较失效：selectedDrink === item是对象引用比较，若item为每次渲染新生成的对象（如接口返回的新实例），即使内容相同，引用也不相等，导致选中样式的条件判断不成立。

修复方案 #

1. 改用唯一标识进行比较（如item.id或item.name，需确保标识唯一）：

// 修改渲染时的样式判断逻辑
<TouchableOpacity
  key={size}
  style={[
    styles.sizeButton,
    // 用唯一属性替代引用比较
    selectedDrink?.id === item.id && selectedDrinkSize === size && styles.selectedSizeButton
  ]}
  onPress={() => handleAddDrink(item, size)}
>
  <Text style={styles.sizeButtonText}>{size}</Text>
</TouchableOpacity>

2. 优化useCallback的依赖稳定性：若prices为复杂对象，使用useMemo缓存避免handleAddDrink频繁重建：

// 缓存prices对象，确保依赖稳定
const memoizedPrices = useMemo(() => prices, [/* 此处传入prices的原始依赖项，如接口返回的数据源 */]);

const handleAddDrink = useCallback((item, size) => {
  if (!memoizedPrices[item.category] || !memoizedPrices[item.category][size]) {
    console.error(`Price not found for ${item.name} (${size})`);
    Alert.alert('Error', `Price not available for ${item.name} (${size})`);
    return;
  }

  setSelectedDrink(item);
  setSelectedDrinkSize(size);
}, [memoizedPrices]);

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