Question

addCourier=()=>{

const {courier}=this.state;

this.setState({
              counter:this.state.counter+1
              }),
               ()=>{
                this.setState({
                             courier:{...courier,"courier"+this.state.counter}
                             })
                   }


}

//这里快递是一个数组 // addCourier在按钮的Click事件中被调用

Answer 1

您的示例的最大问题是它甚至不是有效的JavaScript，但如果是有效的JavaScript，则没有理由调用嵌套的setState。

您可以先计算计数器的新值，然后多次使用该新值来设置状态：

addCourier = () => {
  const { courier } = this.state;
  //calculate new value for counter
  const counter = this.state.counter + 1;
  this.setState({
    counter, //set new value for counter
    courier: {
      ...courier,
      //use new counter value
      other: 'courier' + counter,
    },
  });
};

documentation says

setState（）的第二个参数是可选的回调函数，将在setState完成并重新渲染组件后执行。通常，我们建议改将componentDidUpdate（）用于此类逻辑。

并且：

如果下一个状态取决于当前状态，我们建议使用updater函数形式，而不是：

this.setState((state) => {
  return {quantity: state.quantity + 1};
});

但是我认为最好只是在设置状态之前先计算所有状态更改，并且好奇地看到一个有效的用例，其中需要回调或更新器功能。

在setState的回调中设置setState可以吗？

1 个答案: