[英]How should one use the setState() method in ReactJS?
I'm new to ReactJS and I'm trying to understand state
and setState()
. 我是ReactJS的新手,我正在尝试理解
state
和setState()
。 Using setState()
I wanted to change a name, but I am not sure where I should call the setState()
method in my code: 使用
setState()
我想更改一个名称,但我不确定在我的代码中应该调用setState()
方法:
render()
is called render()
之前在构造函数的末尾调用它 This is my code: 这是我的代码:
import React from "react";
class StateBasic extends React.Component{
constructor(){
super();
let personProfile = this.state = {
name : "Bob",
skill : "Art Designer",
location : "LA"
}
console.log(personProfile);
}
render(){
let changeName = this.setState({ name : "Frank" });
return(
<div className="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<ul>
<li> {this.state.name} </li>
<li> {this.state.skill} </li>
<li> {this.state.location} </li>
<li> {changeName} </li>
</ul>
</div>
);
}
}
// Let's render ReactDOM
export default StateBasic;
If you call setState
in render()
method you will create infinite loop, instead you can use componentDidMount
. 如果在
render()
方法中调用setState
,则会创建无限循环,而不是使用componentDidMount
。
class StateBasic extends React.Component { constructor() { super(); let personProfile = this.state = { name: "Bob", skill: "Art Designer", location: "LA" } } componentDidMount() { setTimeout(() => { this.setState({name: "Frank"}); }, 1000) } render() { return ( <div className="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"> <ul> <li> {this.state.name} </li> <li> {this.state.skill} </li> <li> {this.state.location} </li> </ul> </div> ); } } ReactDOM.render( < StateBasic / > , document.getElementById('container') )
<script src="https://unpkg.com/react@16.0.0/umd/react.development.js"></script> <div id="container"></div> <script src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.development.js"></script>
setState
usually occurs ( but it's not restricted to ) when there's some sort of interaction between the user and your application. 当用户和应用程序之间存在某种交互时,
setState
通常会发生( 但不限于 )。 For example: 例如:
class StateExample extends React.Component { constructor() { super() this.state = { clickTimes: 0, value: '', } this.handleChange = this.handleChange.bind(this) this.handleClick = this.handleClick.bind(this) } handleChange(event) { this.setState({ value: event.target.value }) } handleClick() { this.setState({ clickTimes: this.state.clickTimes + 1 }) } render() { return ( <div> <label>Type here:</label> <input type="text" value={this.state.value} onChange={this.handleChange} /> <div style={{ marginTop: 20 }}> <button onClick={this.handleClick}>Click-me</button> Click times: {this.state.clickTimes} </div> </div> ) } } ReactDOM.render( <StateExample />, document.getElementById('root') )
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>
For more information I recommend reading State and Lifecycle in ReactJS docs. 有关更多信息,我建议您阅读ReactJS文档中的State和Lifecycle 。
If you initializing the state then do in the constructor 如果初始化状态,则在构造函数中执行
constructor(){
super();
let personProfile = this.state = {
name : "Bob",
skill : "Art Designer",
location : "LA"
}
console.log(personProfile);
this.state= { name : "Frank" };//initialvalue
}
If you want to change on some action then make a method ( changeName
) and use like this in render: 如果你想改变一些动作,那么创建一个方法(
changeName
)并在渲染中使用这样的方法:
changeName(name){
this.setState({name})
}
render(){
let changeName = this.setState({ name : "Frank" });
return(
<div className="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<ul>
<li> {this.state.name} </li>
<li> {this.state.skill} </li>
<li> {this.state.location} </li>
<li onClick={this.changeName.bind(this,"hello")} > change Me </li>
</ul>
</div>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.