Question

感谢您的光临！我有一个需要独立增加和减少多个计数器的应用程序

state = {
windowCounters: [
{
  id: 0,
  image: singlePane125x125,
  type: 'Single Pane',
  unitPrice: 4.25,
  qtyCount: 0,
  subtotal: 0,
},
{
  id: 1,
  image: twoPane125x125,
  type: '2 Panes',
  unitPrice: 8.0,
  qtyCount: 0,
  subtotal: 0,
},

]， };

我正在努力使用增量方法，这是我拥有的方法之一试过了它只会更新一次

incrementCount = (id) => {
this.setState(prevState => ({
  windowCounters: prevState.windowCounters.map(
    counter => (counter.id === id ? Object.assign(counter, { qtyCount: +1 }) : counter),
  ),
}));

};

Answer 1

似乎您在增量语句中缺少counter.qtyCount。

这就是为什么它仅更新一次，而不是增加而不是分配+1值。

{ qtyCount: +1 } //不会增加。

应该的。

counter => (counter.id === id ? 
              Object.assign(counter, { qtyCount: counter.qtyCount+1 }) : counter), 
                                                 ^^^^^^^^^^^^^^^^

Answer 2

当您执行qtyCount: +1时，实际上是将1分配给键qtyCount。这就是为什么您会觉得该值仅被更新一次（尝试将其替换为+1000，这样您会更清楚地看到它）。您要做的就是添加到先前的状态值。像这样：

counter.qtyCount: counter.qtyCount +1

如果对此有疑问，可以继续尝试以下链接：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

希望我的回答很有帮助。

React Native如何在数组对象的属性（qtyCount）上设置状态

2 个答案: