Javascript ReactJS-setState（）未立即反映更改

我的代码如下：

import React, { Component } from 'react';

class Counter extends Component {

    constructor() {
        super();
        this.state = {
            counter : 0
        }
    }


    increment() {
        const { counter } = this.state;
        this.setState({counter : counter+1 });
        console.log(counter);
    }


    render() {
        const { counter} = this.state;
        return (
            <div>
                <h1> {counter} </h1>
                <button onClick={() => this.increment()}>Click Me</button>
            </div>
        );
    }
}

export default Counter;

import React，{Component}来自'React'；
类计数器扩展组件{
构造函数（）{
超级（）；
此.state={
柜台:0
}
}
增量（）{
const{counter}=this.state；
this.setState（{counter:counter+1}）；
控制台日志（计数器）；
}
render（）{
const{counter}=this.state；
返回(
{计数器}
this.increment（）}>单击我
);
}
}
导出默认计数器；

我有一个简单的h1和一个按钮。程序的行为应该是，当我单击按钮时，计数器的值应该增加1（在网页和控制台上，因为我也在控制台中打印计数器的值）。问题是，当我单击按钮时，网页上的值从0变为1，但在我的控制台中，我仍然看到计数器的值为0（而不是1），当我第二次单击按钮时，网页上的值从1变为2，但在我的控制台中，值从0变为1（而不是2）。有人能告诉我发生了什么吗？

这个.setState（）

是一个异步函数，当它移动到下一行时会在后台发生。 要在setState（）之后运行代码，您需要回调-因此在您的示例中是：

this.setState(prevState => ({ counter: prevState.counter + 1 }), () => console.log(counter)); // the console.log() will only run after the setState is finished!

---

它很容易忘记它的异步，因为它通常发生得非常快，您可以在之后立即

console.log（）

，并且状态已经更改

setState操作是异步的，并且为提高性能而成批执行。这一点在本节中进行了解释

setState（）不会立即改变this.state，但会创建挂起的状态转换。调用此方法后访问this.state可能会返回现有值。无法保证对setState调用的同步操作，并且可能会对调用进行批处理以提高性能

您可以使用setState callback查找即时更改，也可以使用

componentDidUpdate

this.setState({ counter : counter+1 }, newState => {
   console.log(newState.counter)
});

或

---

那么我应该怎么做才能得到我想要的输出呢？你能告诉我怎么做吗？有没有其他不使用prevCounter的方法呢？我的第一条评论中有一个错误，下面是在你的例子中更新状态的正确方法：

this.setState（prevState=>（{counter:prevState.counter+1}），（）=>console.log（counter））关于
setState
的异步性质，这两个答案都是正确的。但在这里的例子中，即使是完全同步的，您也会简单地记录旧值，因为初始的解构赋值。当
state.counter
为标量值时，实际上已将该值复制到
counter
变量中。之后对
状态的任何更改。计数器
将不会被反映。演示：
componentDidUpdate(prevProps, prevState) {
  console.log(this.state) // New State
  console.log(prevState) // Previous State
  if (this.state.counter !== prevState.counter) {
    // counter changed
  }
}