在 React(类组件中)setState 的第二个参数是一个 回调函数(callback),它会在 状态更新并且组件重新渲染完成后 执行。
基本语法
this.setState(updater[, callback])
-
updater:可以是对象(直接更新状态)或函数(根据前一个状态计算新的状态);
-
callback:可选函数,会在状态更新并重新渲染完成后调用。
举个例子
this.setState({ count: this.state.count + 1 }, () => {console.log('状态更新完成后的 count:', this.state.count);
});
输出顺序说明:
this.setState({ count: this.state.count + 1 });
console.log(this.state.count); // 这里可能还是旧的值
setState 是异步的,所以如果你想在状态更新后执行逻辑(比如打印最新 state 或调用接口),就需要用第二个参数的回调。
更复杂的情况(函数式 setState)
this.setState((prevState, props) => ({count: prevState.count + 1}),() => {console.log('更新后的 count:', this.state.count);}
);
这种形式可以安全地基于上一个状态进行更新。
注意
- 第二个参数 只在类组件中生效。
在函数组件中,你应该使用 useEffect 来监听 state 变化:
const [count, setCount] = useState(0);useEffect(() => {console.log('count 更新后:', count);
}, [count]);
总结
参数位置 | 作用 | 何时执行 |
---|---|---|
第一个参数 | 更新状态 | 异步执行 |
第二个参数 | 状态更新、组件重新渲染完成后执行回调 | 渲染结束后 |