如何用JavaScript在Firebase实时数据库中增减库存值

原代码存在的问题 #

• 从localStorage获取的input2/input1是字符串类型，直接进行加减操作会导致字符串拼接，而非数值运算
• 库存增减操作仅写了表达式但未赋值给变量，等于没有修改数据
• 调用updateSelectValue时传入了参数，但函数本身未定义形参，传参无意义
• 使用PUT方法时未将数据转为JSON字符串，Firebase无法识别
• 未处理数据库中对应节点为空（首次无数据）的情况
• 未定义totalInput变量就执行console.log(totalInput)，会触发报错

修正后的完整cart.js代码 #

// 从localStorage获取DOM中的输入和选择数据
const select2 = localStorage.getItem('select2')
const select = localStorage.getItem('select')
// 转换为数值类型，默认值设为0避免空值报错
const input2 = Number(localStorage.getItem('input2')) || 0
const input1 = Number(localStorage.getItem('input')) || 0

// 点击修改库存时向Firebase数据库提交更新
function checkout(){
  async function updateSelectValue() {
    try {
      const baseURL = 'https://paronab-79d88-default-rtdb.europe-west1.firebasedatabase.app/'
      const url = baseURL + `product/${select2}/${select}.json`
      const response = await fetch(url)
      let currentStock = await response.json()
      
      // 处理数据库中无数据的情况，默认库存为0
      currentStock = Number(currentStock) || 0
      // 计算新库存：原库存 + 入库量(input2) - 出库量(input1)
      const newStock = currentStock + input2 - input1

      // 发送更新请求，将数值转为JSON字符串提交
      const updateResponse = await fetch(url, {
        method: 'PUT',
        body: JSON.stringify(newStock),
        headers: {
          'Content-type': 'application/json; charset=UTF-8',
        },
      });

      if (updateResponse.ok) {
        console.log('库存更新成功！');
      } else {
        console.error('库存更新失败');
      }
    } catch (error) {
      console.error('更新过程出错:', error);
    }
  }

  // 调用更新函数，无需传参（依赖外部已获取的select2/select变量）
  updateSelectValue();
  emptyCart()
}

关键修正说明 #

• 数值类型转换：将从localStorage获取的输入值转为Number类型，避免字符串拼接错误，同时设置默认值0处理空值
• 正确计算库存：将增减运算结果赋值给newStock变量，确保数据被实际修改
• 请求体格式修正：用JSON.stringify()将数值转为JSON字符串，符合Firebase接口要求
• 空数据处理：当数据库中对应节点无数据时，默认库存设为0，避免NaN错误
• 函数调用修正：移除无意义的传参，直接调用updateSelectValue()即可
• 变量语义优化：将原data改为currentStock、newStock，语义更清晰，避免混淆

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