react中state與setstate的使用

我們可以利用state來定義一些變量的初始值

//放在construcor里
this.state = {
    list: [1, 2, 3]
}

要更改state里的值，注意要遵循react里immutable規范，state不允許我們做任何改變，只能通過setState來更改

const list = [...this.state.list];
list.splice(0, 1);
this.setState({list:list});

強烈推薦setstate的寫法如下：

const list = [...this.state.list];
list.splice(0, 1);
this.setState((prevState) => ({   //外面加小括號可以代替return
    list: list
}));

 還可以這樣寫

this.setState((prevState) => {   //外面加小括號可以代替return
    const list = [...prevState.list];
    list.splice(0, 1);
    return {list}
});

 setState第二個參數回調函數，在setState設置完之后執行，可以對改變后的數據進行操作

this.setState((prevState) => {   //外面加小括號可以代替return
    const list = [...prevState.list];
    list.splice(0, 1);
    return {list}
}, () => {
    console.log(this.state.list);
});