如何在ReactJS中使用setState（）方法？

Question

我是ReactJS的新手，我正在嘗試理解state和setState() 。 使用setState()我想更改一個名稱，但我不確定在我的代碼中應該調用setState()方法：

1. 在構造函數內部
2. 在渲染方法OR中
3. 創建一個自定義方法，並在調用render()之前在構造函數的末尾調用它

這是我的代碼：

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;

Answer 1

如果在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> 

Answer 2

當用戶和應用程序之間存在某種交互時， setState通常會發生（ 但不限於 ）。 例如：

• 當用戶輸入輸入時
• 當用戶單擊按鈕時

 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> 

有關更多信息，我建議您閱讀ReactJS文檔中的State和Lifecycle 。

Answer 3

如果初始化狀態，則在構造函數中執行

constructor(){
    super();
    let personProfile =  this.state = {
            name : "Bob",
            skill : "Art Designer",
            location : "LA"
    }
    console.log(personProfile);
    this.state= { name : "Frank" };//initialvalue         
}

如果你想改變一些動作，那么創建一個方法（ 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>
        );
    }