Javascript 设置状态增量和react中的每个增量1之间有什么区别 类应用程序扩展了React.Component{ 建造师（道具）{ 超级（道具）； 此.state={ 数目：1 } } componentDidMount（）{ 这是我的国家({ num:this.state.num+1 }); 这是我的国家({ num:this.state.num+1 }); } render（）{ 返回( {this.state.num} ) } }

在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+1
    });
    this.setState({
      num: this.state.num+1
    });
  }
  render() {
    return (
      <div>
        { this.state.num }
      </div>

    )
  }
}

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数目：1
}
}
componentDidMount（）{
这是我的国家({
num:++this.state.num
});
这是我的国家({
num:++this.state.num
});
}
render（）{
返回(
{this.state.num}
)
}
}

setState使用自动增量更新num，但最后num是3

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

---

谢谢

设置状态是异步的，因此在更新状态时不能依赖当前状态。 请参考文档，特别是讨论类似示例的部分：

这种形式的setState（）也是异步的，在同一个周期中的多个调用可以批处理在一起。例如，如果您试图在同一周期内增加一个项目数量不止一次，这将导致：…等

---

setState是异步的，所以在更新当前状态时不能依赖当前状态。 请参考文档，特别是讨论类似示例的部分：

这种形式的setState（）也是异步的，在同一个周期中的多个调用可以批处理在一起。例如，如果您试图在同一周期内增加一个项目数量不止一次，这将导致：…等

---

setState是异步的，在它返回此之后。状态尚未更改：

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>

    )
  }
}

所以这和

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: ++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.state.num进行变异

so

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

这实际上与

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: ++this.state.num // this.state.num is 2 after increment
});
this.setState({
  num: ++this.state.num // this.state.num is 3 after incrementing again
});

一般来说，调用setState并基于
此.state
计算新值不是一个好主意。如果要根据状态中的当前值更改状态，请不要访问
this.state
！
相反，请回调
setState
：

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

从以下方面考虑此示例：

例如，如果你
尝试在同一时间内多次增加项目数量
循环，其结果相当于：

后续调用将覆盖同一时间内以前调用的值
循环，因此数量只会增加一次。如果下一个
状态取决于当前状态，建议使用更新程序
函数形式，而不是：

setState是异步的，在它返回此之后。状态尚未更改：

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>

    )
  }
}

所以这和

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: ++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.state.num进行变异
so

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

这实际上与

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: ++this.state.num // this.state.num is 2 after increment
});
this.setState({
  num: ++this.state.num // this.state.num is 3 after incrementing again
});

一般来说，调用setState并基于
此.state
计算新值不是一个好主意。如果要根据状态中的当前值更改状态，请不要访问
this.state
！
相反，请回调
setState
：

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

从以下方面考虑此示例：

例如，如果你
尝试在同一时间内多次增加项目数量
循环，其结果相当于：

后续调用将覆盖同一时间内以前调用的值
循环，因此数量只会增加一次。如果下一个
状态取决于当前状态，建议使用更新程序
函数形式，而不是：

阅读并回答为什么这样使用
++
通常是一个坏主意（或者不好，取决于您阅读的答案）。对于React如何使用
设置状态，您将两个问题混为一谈。我将此作为一个重复关闭，因为这里的主要问题是
setState
的使用，而另一个更为“次要”的问题是与JS基础知识相关的，@HereticMonkey在第一条评论中提到了这一点。阅读并回答为什么这样使用
++
通常是一个坏主意（或者不是，取决于你阅读的答案）。关于React如何使用
setState
，你将两个问题混为一谈。我将此作为一个重复问题结束，因为这里的主要问题是
setState
的使用，而另一个更“次要”的问题与JS基础知识相关，@HereticMonkey在第一条评论中对此进行了阐述。