react中如何修改state值

根據state型別 更新

當狀態發生變化時，如何建立新的狀態？根據狀態的型別，可以分成三種情況：

1、 狀態的型別是不可變型別（數字，字串，布林值，null， undefined）

這種情況最簡單，直接給要修改的狀態賦乙個新值即可

//原state

this
.state =
//改變state
this
.setstate
()

陣列是乙個引用，react 執行 diff 演算法時比較的是兩個引用，而不是引用的物件。所以直接修改原物件，引用值不發生改變的話，react 不會重新渲染。因此，修改狀態的陣列或物件時，要返回乙個新的陣列或物件。

（1）增加

如有乙個陣列型別的狀態books，當向books中增加一本書(chinese)時，使用陣列的concat方法或es6的陣列擴充套件語法

// 方法一：將state先賦值給另外的變數，然後使用concat建立新陣列

let books =
this
.state.books;
this
.setstate()
// 方法二：使用prestate、concat建立新陣列
this
.setstate
(prestate =>()
)// 方法三：es6 spread syntax
this
.setstate
(prestate =>()
)

當從books中擷取部分元素作為新狀態時，使用陣列的slice方法：

// 方法一：將state先賦值給另外的變數，然後使用slice建立新陣列

let books =
this
.state.books;
this
.setstate()
// // 方法二：使用prestate、slice建立新陣列
this
.setstate
(prestate =>()
)

當從books中過濾部分元素後，作為新狀態時，使用陣列的filter方法：

// 方法一：將state先賦值給另外的變數，然後使用filter建立新陣列

var books =
this
.state.books;
this
.setstate()
})// 方法二：使用prestate、filter建立新陣列
this
.setstate
(prestate =>()
}))

3、狀態的型別是普通物件（不包含字串、陣列）

物件是乙個引用，react 執行 diff 演算法時比較的是兩個引用，而不是引用的物件。所以直接修改原物件，引用值不發生改變的話，react 不會重新渲染。因此，修改狀態的陣列或物件時，要返回乙個新的物件。

使用es6 的object.assgin方法

// 方法一：將state先賦值給另外的變數，然後使用object.assign建立新物件

var owner =
this
.state.owner;
this
.setstate
(, owner,)}
)// 方法二：使用prestate、object.assign建立新物件
this
.setstate
(prestate =>
(, prestate.owner,)}
))

// 方法一：將state先賦值給另外的變數，然後使用物件擴充套件語法建立新物件

var owner =
this
.state.owner;
this
.setstate(}
)// 方法二：使用prestate、物件擴充套件語法建立新物件
this
.setstate
(prestate =>(}
))

在React中修改state上的資料

1.定義元件 新建乙個.jsx檔案 import react from react export default class mybtn extends react.component render 點選 button p div 2.定義方法 在class中追加 class mybtn exten...

react中state與setstate的使用

我們可以利用state來定義一些變數的初始值 放在construcor裡 this.state 要更改state裡的值，注意要遵循react裡immutable規範，state不允許我們做任何改變，只能通過setstate來更改 const list this state.list list.spl...

React中state與props比較

state 的主要作用是用於元件儲存 控制 修改自己的可變狀態。state 在元件內部初始化，可以被元件自身修改，而外部不能訪問也不能修改。你可以認為 state 是乙個區域性的 只能被元件自身控制的資料來源。state 中狀態可以通過 this.setstate 方法進行更新，setstate 會...