时间戳

首页 > 解决方案 > 反应中的setState增量和每个增量1有什么区别

javascript - 反应中的setState增量和每个增量1有什么区别

问题描述

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      num: 1
    }
  }
  componentDidMount() {
    this.setState({
      num: this.state.num+1
    });
    this.setState({
      num: this.state.num+1
    });
  }
  render() {
    return (
      <div>
        { this.state.num }
      </div>

    )
  }
}

componentDidMount 中调用 setState 两次使用 +1 更新 num，但最终 num 为 2

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      num: 1
    }
  }
  componentDidMount() {
    this.setState({
      num: ++this.state.num
    });
    this.setState({
      num: ++this.state.num
    });
  }
  render() {
    return (
      <div>
        { this.state.num }
      </div>

    )
  }
}

setState 使用自增更新 num，但最终 num 为 3。</p>

这两种方法有什么区别？以及如何理解 setState 如何更新状态？

谢谢你

标签： javascriptreactjsecmascript-6

解决方案

setState 是异步的，它返回后 this.state 还没有改变：

this.setState({
  num: this.state.num+1 // this.state.num is 1, so the value here is 2
});
this.setState({
  num: this.state.num+1 // this.state.num is still 1, so the value is still 2
});

所以这和

this.setState({
  num: 2
});
this.setState({
  num: 2
});

this.state.num然而，在你的第二个例子中，你正在变异

this.setState({
  num: ++this.state.num // this.state.num is 2 after increment
});
this.setState({
  num: ++this.state.num // this.state.num is 3 after incrementing again
});

这实际上与

this.setState({
  num: 2
});
this.setState({
  num: 3
});

一般来说，调用 setState 并根据this.state. 如果要根据 state 中的当前值更改 state，请不要访问this.state！相反，给一个回调setState：

setState(state => ({ num: state.num + 1 })

考虑ReactJS 文档中的这个例子：

例如，如果您尝试在同一周期中多次增加项目数量，则将导致等效于：

Object.assign(
  previousState,
  {quantity: state.quantity + 1},
  {quantity: state.quantity + 1},
  ...
)

后续调用将覆盖同一周期中先前调用的值，因此数量只会增加一次。如果下一个状态取决于当前状态，我们建议使用更新函数形式，而不是：

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

推荐阅读