React Native Async Storage setItem调用失败求助

错误原因分析 #

• 异步函数返回值处理错误：getCart()是异步函数，直接赋值给cart得到的是Promise对象，不是实际的购物车数据，展开这个对象会导致数组结构异常。
• setItem 参数类型错误：AsyncStorage 要求存储的值必须是字符串，你传入了数组，这会触发类型校验失败。
• 未处理初始空购物车场景：首次添加商品时，AsyncStorage.getItem('cart')返回null，直接展开null会报错。

修正后的代码 #

const ProductDetailScreen = (props) => {
  const { product } = props.route.params;

  const addToCart = async () => {
    try {
      // 获取现有购物车数据，处理初始为空的情况
      const existingCartStr = await AsyncStorage.getItem('cart');
      const existingCart = existingCartStr ? JSON.parse(existingCartStr) : [];

      // 将新商品加入购物车数组
      const updatedCart = [...existingCart, product];

      // 把整个购物车数组转为字符串存储
      await AsyncStorage.setItem('cart', JSON.stringify(updatedCart));
    } catch (e) {
      console.error(`Failed to add item: ${JSON.stringify(product)} to cart`, e);
      // 打印完整错误对象，方便排查具体原因
    }
  };

  return (
    <>
      <TouchableOpacity onPress={addToCart}>
        <Button>
          <Text style={styles.btnText}>Add to Cart</Text>
        </Button>
      </TouchableOpacity>
    </>
  );
};

export default ProductDetailScreen;

关键修改说明 #

1. 把购物车数据的获取逻辑移到addToCart内部，确保异步操作完成后再处理数据，避免Promise对象干扰。
2. 处理初始空购物车的情况，当getItem返回null时，将购物车初始化为空数组。
3. 统一在最后将整个购物车数组转为字符串，符合AsyncStorage的存储规则，避免单个商品重复序列化的问题。
4. 在catch块中打印完整错误对象e，可以看到具体的错误类型和信息，帮助快速定位问题。

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