Question

对于按钮上的onClick事件，我有两个处理函数。基本上，它们执行相同的操作，但是一个在状态数组中递增一个元素（作为参数传递），而另一个在递减（但不是同一变量）。说我有两个元素的数组。我希望第一个元素递增，第二个元素递减（array[0]++ array[1]--）。

HandleIncrement = instrumentUp => {
  // create a shallow copy of the array
  const tempCount = [...this.state.instrumentCount];
  // increment the desired instrument
  tempCount[instrumentUp] += 1;
  // update the state
  this.setState({
    instrumentCount: tempCount
  });
};

HandleDecrement = instrumentDown => {
  // create a shallow copy of the array
  const tempCount = [...this.state.instrumentCount];
  // decrement the desired instrument
  tempCount[instrumentDown] -= 1;
  // update the state
  this.setState({
    instrumentCount: tempCount
  });
};

我还有一个用于执行这两种方法的按钮。

 onClick = {() => {
     this.HandleIncrement(0);
     this.HandleDecrmenet(1);
   }
 }

不需要输出。如果这是array = [0 1]，我希望输出为[1 0]，但是输出为[0 0]。我认为这是因为这两个函数是同时执行的，因此，当它们setState，HandleDecrement没有使用更新状态时。

我应该使用类似async或await的东西吗？

Answer 1

setState(updater[, callback])是一个异步函数：

https://facebook.github.io/react/docs/react-component.html#setstate

您可以在setState完成后使用第二个参数回调执行函数，例如：

this.setState({
    instrumentCount: tempCount
}, () => {
    this.HandleDecrmenet(1)
});

Answer 2

我会做这样的事情

handleIncrement = (index) => new Promise(resolve => {
   const tempCount =  Object.assign([], this.state.instrumentCOunt);
  // increment the desired instrument
  tempCount[index] += 1;
  // update the state
  this.setState({
    instrumentCount: tempCount
  }, () => resolve(this.state.instrumentCount) ) ;
})

handleDecrement = (index) => new Promise(resolve => {
   const tempCount =  Object.assign([], this.state.instrumentCOunt);
  tempCount[index] -= 1;
  this.setState({
    instrumentCount: tempCount
  }, () => resolve(this.state.instrumentCount) ) ;
})


onClick={ ()=> {
   this.handleIncrement(1)
    .then(()=>  this.handleDecrement(0) )
}}

或使用等待

onClick={async ()=> {
  await  this.handleIncrement(1)
  this.handleDecrement(0) 
}}

反应onClick多个处理程序功能问题

2 个答案: