React中setState回调函数正确用法及箭头函数疑问解答

Hey there! Let's break down your questions about React's setState behavior one by one—this is a super common gotcha when working with class components, so you're definitely not alone here.

1. 正确的setState函数式更新用法 #

First off, the reason your first approach didn’t work when calling it twice is because React batches synchronous setState calls for performance. That means when you write code like this:

this.setState({ count: this.state.count + 1 });
this.setState({ count: this.state.count + 1 });

Both calls use the same stale this.state.count value (the one before either update takes effect), so they end up canceling each other out—you only get a +1 instead of the expected +2.

The correct way to handle updates that depend on the previous state is to use the functional form of setState, which takes a function instead of an object. This function receives two arguments: prevState (a snapshot of the state right before the update) and props (current component props). You return the new state from this function, ensuring you always build off the most up-to-date state value.

Example of the proper usage:

this.setState((prevState) => ({
  count: prevState.count + 1
}));
this.setState((prevState) => ({
  count: prevState.count + 1
}));

Now each update builds on the previous one, so you’ll get the +2 result you expected.

2. 为什么箭头函数能生效？ #

The arrow function itself isn’t the magic here—it’s that you’re passing a function to setState instead of a plain object.

When you pass a function to setState, React queues that function to run after the current state is finalized. Each time the function executes, it gets the latest prevState (including changes from any prior queued updates), so subsequent calls don’t rely on stale this.state values.

You could also use a regular function and get the same result—arrow functions are just cleaner for one-liner logic:

this.setState(function(prevState) {
  return { count: prevState.count + 1 };
});

3. prevState.count是怎么定义的？我从没设置它为0啊 #

Great question! prevState isn’t something you manually define—it’s a parameter that React automatically passes to your functional setState callback. It represents the snapshot of your component’s state right before the current update cycle starts.

If you didn’t explicitly initialize your state, this.state would be undefined, and accessing prevState.count would throw an error. So I’m guessing you did initialize your state (either in the constructor or via class fields):

class App extends React.Component {
  constructor(props) {
    super(props);
    // 这里初始化了count的初始值为0，React会用这个作为第一个prevState的基础
    this.state = { count: 0 };
  }

  // 或者用更简洁的类字段语法
  // state = { count: 0 };

  // ...你的increaseCount方法
}

React uses this initial state as the first prevState when your component mounts. Every time you call setState with a function, React passes the most recent state snapshot as prevState, so you always have access to the up-to-date value without relying on this.state.

额外补充：另一种生效的方式（回调嵌套） #

You mentioned three approaches—if one of them was using the second callback argument of setState, that works too, but it’s less scalable:

this.setState({ count: this.state.count + 1 }, () => {
  // 这个回调在状态更新完成后执行，此时this.state已经是最新的
  this.setState({ count: this.state.count + 1 });
});

This works because the second callback runs after the first setState finishes updating the state. However, this leads to messy nested callbacks if you need more than two updates, which is why the functional setState approach is preferred.

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