React中await为何能与setState配合生效？

核心问题1：为何移到updateCount方法后首次点击看起来“没更新count”？ #

你看到的“count没更新”实际是document.title未同步到最新值，组件的state和render里的count其实已经更新了。原因在于：
React的setState是异步批量更新机制，在同步代码执行流程中，调用setState后不会立刻修改this.state。所以你在setState之后直接访问this.state.count，拿到的还是更新前的旧值，此时设置document.title自然显示的是旧数据。

核心问题2：为何加async/await后能生效？ #

这不是因为setState支持await——React类组件的setState根本不返回Promise，它的返回值是undefined。

await undefined会被JavaScript自动包装成Promise.resolve(undefined)，这会让后续代码进入微任务队列，等到当前同步代码执行完毕、React完成批量状态更新后才会执行。此时this.state已经更新，所以设置document.title就能拿到最新的count值。

本质是你利用了JavaScript事件循环的特性，而非setState本身的异步支持，属于“歪打正着”的写法，并非正确实现方式。

核心问题3：VS Code的提示是否说明React有Bug？ #

不是Bug。VS Code的提示完全正确：await对setState的返回值（undefined）类型没有任何影响，类型层面上等价于直接执行后续代码。但运行时因为事件循环的执行顺序变化，导致了行为差异——这是语言特性，和React无关。

正确的实现方式 #

方式1：使用setState的回调函数（推荐，针对单次更新后的操作） #

setState的第二个参数是状态更新完成后的回调函数，确保你在state更新后再执行操作：

class LastTest extends Component {
    state = { count: 0 }
    componentDidMount() {
        document.title = `You clicked ${this.state.count} times`;
    }
    updateCount(){
        this.setState(
            { count: this.state.count + 1 },
            // 状态更新完成后执行
            () => {
                document.title = `You clicked ${this.state.count} times`;
            }
        );
    }
    render() {
        return ( 
            <div>
                <p>You clicked {this.state.count} times</p>
                <button onClick={() => this.updateCount()}>
                Click me
                </button>
            </div>
        );
    }
}

方式2：使用componentDidUpdate生命周期（推荐，针对所有state变化后的操作） #

和你的原始代码一致，只要state发生更新就同步document.title：

class LastTest extends Component {
    state = { count: 0 }
    componentDidMount() {
        document.title = `You clicked ${this.state.count} times`;
    }
    componentDidUpdate() {
        document.title = `You clicked ${this.state.count} times`;
    }
    updateCount(){
        this.setState({ count: this.state.count + 1 });
    }
    render() {
        return ( 
            <div>
                <p>You clicked {this.state.count} times</p>
                <button onClick={() => this.updateCount()}>
                Click me
                </button>
            </div>
        );
    }
}

方式3：函数式setState（避免异步状态依赖问题） #

如果状态更新依赖前一次的state值，推荐使用函数式的setState，确保拿到最新的前一次状态：

updateCount(){
    this.setState(prevState => ({ 
        count: prevState.count + 1 
    }), () => {
        document.title = `You clicked ${this.state.count} times`;
    });
}

内容的提问来源于stack exchange，提问作者Nima