React-setState基本應用

基本應用

2.setState使用

import React, {Component} from 'react';
import PropTypes from 'prop-types'

class Counter extends Component{
    constructor(props){
        super(props);
        this.state= {
            num: props.initNum,
        }
    }


    addNum = () => {
        // 來試試看num一次加2

        //setState為非同步方式，所以不能期望下一個setState的num馬上+1，所以能使用下面兩招方法
        this.setState({
            num: this.state.num + 1,
        })
        this.setState({
            num: this.state.num + 1,
        })

        //第一招  使用function 箭頭涵式
        this.setState((state) => {      //使用return更改值
            return {
                num: state.num + 1,
            }
        })
        this.setState((state) => ({     //使用物件更改值，注意，記得{}物件外面要在包一層()，不然程式會認為是要開始寫一個涵式
            num: state.num + 1,
        }));

        //第二招  使用callback function
        this.setState((state) => ({     //執行的順序會是先跑完外面一圈的箭頭涵式，當兩個都跑完之後，再去執行callback function
            num: state.num + 1,
        }), () => {
            setTimeout(() => {          //先執行完兩個callback function，再去執行setTimeout
                console.log('執行1') 
            }, 0);
        });
        this.setState((state) => ({
            num: state.num + 2,
        }), () => {
            console.log('執行2')
        });
    }


    render() {
        return(
            <div>
                <h1>{this.state.num}</h1>
                <button type="button" onClick={this.addNum}>+1</button>
            </div>
        )
    }
}

Counter.defaultProps = {
    initNum: 5,
}

Counter.propTypes = {
    initNum: PropTypes.number,
}


export default Counter;