Question

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

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

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

由于此数组是组件状态的一部分，因此我使用immutability-helper。我发现我可以用这种方式正确克隆和改变状态：

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

上面的代码为items[]数组中的第一个元素设置了serveSize，它是Chicken。然而，我不知道我需要事先更新的对象的索引，因此 0 我硬编码不会起作用。似乎我无法将此索引存储在变量中，因为update()会认为它是对象键。

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

Answer 1

变量可以用作对象的键。

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

你可以找到＆＃39; Chicken＆＃39;的索引号。并将其保存到变量中，并使用它来合成newState。

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

1 个答案: