React中如何向Firebase发送带动态对象键的PATCH请求

我正在学习React，尝试更新Firebase数据库中的条目，但对Firebase的操作存在疑问。

初始添加数据时，我的POST请求如下：

fetch('https://shopping******.firebasedatabase.app/shoppinglist.json', {
    method: 'POST',
    headers: {'Content-Type':'application/json'},
    body: JSON.stringify({title, amount}) //this is all I send, like {title: 'Apple', amount: 2}
}).then(response => {
    return response.json()
}).then(responseData => {
    // setShoppingList( prevShoppingList => [...prevShoppingList, {id: responseData.name, title, amount}] );
    dispatch({ type: 'ADD', item: {id: responseData.name, title, amount} }); // I get the new item id from responseData.name
});

Firebase返回的列表数据格式如下：

{"-NZCS9vSdsK0xFyf7yiQ":{"amount":1,"title":"Apple"}}

现在我想在添加同款商品时更新amount字段，尝试使用PATCH请求，但不知道如何构造HTTP请求体。如果硬编码数据：

body: JSON.stringify({"-NZCS9vSdsK0xFyf7yiQ":{"amount":10,"title":"Apple"}})

可以正常更新，但无法动态构建这样的对象。我尝试使用const updateItem = {item.id:{amount: item.amount, title: item.title}}，但报错：Unexpected token, expected ","（错误位置在item.id的点处）。

解决方法 #

你遇到的问题是因为在对象字面量中直接使用item.id作为属性名时，JavaScript无法识别这种动态属性写法。要动态设置对象的属性名，需要使用方括号语法：

1. 用计算属性名构建请求体 #

// 假设已获取到要更新的item对象（包含id、title、amount）
const updatePayload = {
  [item.id]: {
    amount: item.amount,
    title: item.title
  }
};

// 发起PATCH请求
fetch(`https://shopping******.firebasedatabase.app/shoppinglist.json`, {
  method: 'PATCH',
  headers: {'Content-Type':'application/json'},
  body: JSON.stringify(updatePayload)
})
.then(response => response.json())
.then(data => {
  console.log('更新成功:', data);
  // 此处可更新本地状态或触发dispatch
});

2. 简化更新（仅修改需要的字段） #

如果只需要更新amount字段，无需重复发送title，Firebase的PATCH请求只会修改指定字段，未提及的字段会保留原值，这样更高效：

const updatePayload = {
  [item.id]: { amount: item.amount }
};

原理说明 #

方括号[item.id]是ES6的计算属性名语法，它会把item.id的实际值作为对象的属性名，而不是把字符串"item.id"当作属性名，完美解决动态属性名的构建问题。

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