Javascript 一次递增所有计数器：如何为多个组件重用处理程序函数

我有3个计数器按钮，但我想要一个单独的按钮，它会将所有计数器增加1。实现它并让状态同时更改所有计数器的最佳方法是什么？我尝试添加一个

countAll

并合并所有计数，但语法似乎不正确，我不知道如何操作

import React, { Component } from 'react';
import Button from './components/Button';

class App extends Component {
  constructor(props) {
  super(props);
  this.state = { counter1: 0, counter2: 0, counter3: 0 };
}

incrementCount1() {
  this.setState(prevState => ({ counter1: prevState.counter1 + 1 }));
}

incrementCount2() {
  this.setState(prevState => ({ counter2: prevState.counter2 + 1 }));
}

incrementCount3() {
  this.setState(prevState => ({ counter3: prevState.counter3 + 1 }));
}

decrementCount1() {
  this.setState(prevState => ({ counter1: prevState.counter1 - 1 }));
}

decrementCount2() {
  this.setState(prevState => ({ counter2: prevState.counter2 - 1 }));
}

decrementCount3() {
  this.setState(prevState => ({ counter3: prevState.counter3 - 1 }));
}

render() {
  let { counter1, counter2, counter3 } = this.state

  return (
    <div className="App">

      <h2>Count: { counter1 }</h2>
      <Button title = { "+" } task = { () => this.incrementCount1(counter1) } />
      <Button title = { "-" } task = { () => this.decrementCount1(counter1) } />

      <h2>Count: { counter2 }</h2>
      <Button title = { "+" } task = { () => this.incrementCount2(counter2) } />
      <Button title = { "-" } task = { () => this.decrementCount2(counter2) } />

      <h2>Count: { counter3 }</h2>
      <Button title = { "+" } task = { () => this.incrementCount3(counter3) } />
      <Button title = { "-" } task = { () => this.decrementCount3(counter3) } />
    </div>

  );
}
}

export default App;

import React，{Component}来自'React'；
从“./components/Button”导入按钮；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={counter1:0，counter2:0，counter3:0}；
}
递增计数1（）{
this.setState（prevState=>（{counter1:prevState.counter1+1}））；
}
递增计数2（）{
this.setState（prevState=>（{counter2:prevState.counter2+1}））；
}
递增计数3（）{
this.setState（prevState=>（{counter3:prevState.counter3+1}））；
}
递减计数1（）{
this.setState（prevState=>（{counter1:prevState.counter1-1}））；
}
递减计数2（）{
this.setState（prevState=>（{counter2:prevState.counter2-1}））；
}
递减计数3（）{
this.setState（prevState=>（{counter3:prevState.counter3-1}））；
}
render（）{
设{counter1，counter2，counter3}=this.state
返回(
计数：{counter1}
this.incrementCount1（计数器1）}/>
此.decrementCount1（计数器1）}/>
计数：{counter2}
this.incrementCount2（counter2）}/>
此.decrementCount2（计数器2）}/>
计数：{counter3}
this.incrementCount3（counter3）}/>
此.递减计数3（计数器3）}/>
);
}
}
导出默认应用程序；

使用和

使用和

---

我非常喜欢@keikai的代码缩减/DRY-principal解决方案，但是如果您不想更改现有的状态形状，和如果您的现有状态只是计数器，那么这将通过将状态作为对象进行操作来实现

获取state对象，将其转换为条目数组，并将其还原为表示下一个状态的对象，其中所有计数器的增量为

incrementBy

数量

incrementAll(incrementBy = 0) {
  this.setState(prevState =>
    Object.entries(prevState).reduce((counters, [counterKey, count]) => {
      counters[counterKey] = count + incrementBy;
      return counters;
    }, {})
  );
}

用法

this.incrementAll（1）}/>
this.incrementAll（-1）}/>

---

我非常喜欢@keikai的代码缩减/DRY-principal解决方案，但是如果您不想更改现有的状态形状，和如果您的现有状态只是计数器，那么这将通过将状态作为对象进行操作来实现

获取state对象，将其转换为条目数组，并将其还原为表示下一个状态的对象，其中所有计数器的增量为

incrementBy

数量

incrementAll(incrementBy = 0) {
  this.setState(prevState =>
    Object.entries(prevState).reduce((counters, [counterKey, count]) => {
      counters[counterKey] = count + incrementBy;
      return counters;
    }, {})
  );
}

用法

this.incrementAll（1）}/>
this.incrementAll（-1）}/>

---

我认为

setState

需要通过

prevState

类似于问题的回调来优雅地处理更新。我认为

setState

需要通过

prevState

类似于问题的回调来优雅地处理更新。谢谢这正是我所寻求的。@jabbachutt伟大的如果足够的话，请接受我的回答。谢谢，这就是我想要的。@Jabbatehutt太好了！如果足够，请接受作为答案。

incrementAll(incrementBy = 0) {
  this.setState(prevState =>
    Object.entries(prevState).reduce((counters, [counterKey, count]) => {
      counters[counterKey] = count + incrementBy;
      return counters;
    }, {})
  );
}

<Button title = { "+ all" } task = { () => this.incrementAll(1) } />
<Button title = { "- all" } task = { () => this.incrementAll(-1) } />