应该如何使用 ReactJS 中的 setState() 方法? [英] How should one use the setState() method in ReactJS?

问题描述

我是 ReactJS 的新手，我正在尝试理解 state 和 setState().使用 setState() 我想更改名称，但我不确定应该在代码中的何处调用 setState() 方法:

1. 在构造函数内部 OR
2. 渲染方法内部 OR
3. 创建一个自定义方法并在调用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:

1. Inside the constructor OR
2. Inside the render method OR
3. 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屋！