如何在 React 状态下更新数组中特定索引处的对象？

Question

我正在使用 React 构建卡路里计算应用程序。我的一个组件在其状态下有一份食品清单：

this.state = {
   items: [
      {
        name: 'Chicken',
        selectedServing: {
           label: 'breast, grilled',
           quantity: 3
        }
      },
      {
        name: 'French Fries',
        selectedServing: {
           label: 'medium container',
           quantity: 1
        }
      }
   ]

当用户更改他们食用的份量时，我必须更新 items[] 数组中项目的属性。例如，如果用户吃了另一个鸡胸肉，我需要更改 items[0] 中的 selectedServing 对象。

因为这个数组是组件状态的一部分，所以我正在使用 immutability-helper。我发现我可以通过这种方式正确地克隆和改变状态：

let newState = update(this.state, {
  items: {
    0: {
      selectedServing: {
        servingSize: {$set: newServingSize}
      }
    }
  }
});

以上代码为 items[] 数组中的第一个元素设置了 servingSize，即 Chicken。但是，我不会事先知道我需要更新的对象的索引，所以我硬编码的0 将不起作用。看来我不能把这个索引存储在一个变量中，因为update()会认为它是一个对象键。

如何以编程方式更新列表中特定索引处的对象？

Answer 1

变量可以作为对象的键。

let foo = 3
let newState = { items: { [foo]: { somthing: 'newValue' } } }
// above is equal to { items: { '3': { somthing: 'newValue' } } }

你可以找到'Chicken'的索引号并保存到一个变量中，并用它来合成newState。

如何在 React 状态下更新数组中特定索引处的对象？

How to update object at specific index in array within React state?

state

immutability

deep-copy

reactjs