应该如何使用 ReactJS 中的 setState() 方法? [英] How should one use the setState() method in ReactJS?
本文介绍了应该如何使用 ReactJS 中的 setState() 方法?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我是 ReactJS 的新手,我正在尝试理解 state
和 setState()
.使用 setState()
我想更改名称,但我不确定应该在代码中的何处调用 setState()
方法:
- 在构造函数内部 OR
- 渲染方法内部 OR
- 创建一个自定义方法并在调用
render()
之前在构造函数的末尾调用它
这是我的代码:
从react"导入React;类 StateBasic 扩展了 React.Component{构造函数(){极好的();让 personProfile = this.state = {姓名:鲍勃",技能:艺术设计师",地点:洛杉矶"}控制台日志(个人资料);}使成为(){让 changeName = this.setState({ name : "Frank" });返回(<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>
);}}//让我们渲染 ReactDOM导出默认的 StateBasic;
解决方案
如果你在 render()
方法中调用 setState
你会创建无限循环,你可以使用componentDidMount
.
class StateBasic 扩展 React.Component {构造函数(){极好的();让 personProfile = this.state = {姓名:鲍勃",技能:艺术设计师",地点:洛杉矶"}}componentDidMount() {setTimeout(() => {this.setState({name: "Frank"});}, 1000)}使成为() {返回 (<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>
);}}ReactDOM.render( <状态基本/>,document.getElementById('容器'))
<script src="https://unpkg.com/react@16.0.0/umd/react.development.js"></脚本><div id="容器"></div><script src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.development.js"></script>
I'm new to ReactJS and I'm trying to understand state
and setState()
. Using setState()
I wanted to change a name, but I am not sure where I should call the setState()
method in my code:
- Inside the constructor OR
- Inside the render method OR
- Create a custom method and call it at the end of the constructor before
render()
is called
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
.
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>
这篇关于应该如何使用 ReactJS 中的 setState() 方法?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文