React setState使用方法

最新推荐文章于 2025-03-11 10:34:33 发布

Tairan F

最新推荐文章于 2025-03-11 10:34:33 发布

阅读量385

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.youkuaiyun.com/QingtaiSensei/article/details/117818779

版权

React 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了React组件中setState API的使用方法，包括实例演示、参数类型以及如何传入处理state的函数。通过示例展示了如何直接传入要改变的对象，并强调在使用setState时需注意对this.state的引用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

setState API

setState(object nextState[, function callback])

第一个参数为下一state，第二个可选参数为回调函数。

实例

来自菜鸟教程

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
class Counter extends React.Component{
  constructor(props) {
      super(props);
      this.state = {clickCount: 0};
      this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick() {
   this.setState(function(state) {
      return {clickCount: state.clickCount + 1};
    });
  }
  render () {
    return (<h2 onClick={this.handleClick}>点我！点击次数为: {this.state.clickCount}</h2>);
  }
}
ReactDOM.render(
  <Counter />,
  document.getElementById('example')
);
</script>

</body>
</html>

可传入参数类型

传入处理state的函数

this.setState(
   function (state){
   		//返回值为要改变的属性的对象
    	return {clickCount: state.clickCount + 1};
    }
);

或者写为箭头函数的形式：

this.setState(
   state =>  {return {clickCount: state.clickCount + 1};}
);

可以省略掉return语句，改用括号包裹要返回的表达式

this.setState(
   state =>  ({clickCount: state.clickCount + 1})
);

直接传入要改变的对象

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

注意这里需要使用this来引用state，事实上之前传入函数的方法也只是为了在setState方法内部调用时取得当前state的引用而已，比如传入函数的方法还可以写成这样：

this.setState(
   () =>  ({clickCount: this.state.clickCount + 1})
);