這篇文章將為大家詳細講解有關react中獲取state的方法，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創新互聯公司-專業網站定制、快速模板網站建設、高性價比巴馬網站開發、企業建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式巴馬網站制作公司更省心,省錢,快速模板網站建設找我們，業務覆蓋巴馬地區。費用合理售后完善，10多年實體公司更值得信賴。

react中獲取state的方法：首先打開相應的react代碼文件；然后在react中可以通過“this.state.{屬性}”的方式直接獲取state即可。

react中怎么獲取state？

在react中可以通過this.state.{屬性}的方式直接獲取state，但是當我們修改state的時候，往往有許多的坑需要注意。

以下為三種常見的陷阱：

1、不能直接修改state。

組件修改state，并不會重新觸發render。列如：

//錯誤
this.state.title='React';
正確修改方式是使用setState（）；
//正確
this.setState({title:'React'});

2、state的更新時異步的

調用setState時，組件state并不會立即改變，只是把要修改的狀態放入事件隊列當中，而react會優化真正的執行時機，并且處于本身的性能原因，可能會將多次setState的狀態修改合并成一次狀態修改。因此不要依靠當前的state計算下一個state，因為當真正執行狀態修改時，依賴的this.state并不能保證是新的state，因為react本身會把多次state合并成一次，這時this.state還是幾次state修改前的state，同樣也不能依賴當前的props計算下一個狀態，因為props的更新也是異步。列對于電商類的應用中，在購物車里，點擊一次購買按鈕，購買數量會加1，如果連續點擊兩次，會加2，而在react合并修改為一次的情況下，相當與執行了如下代碼：

Object.assign(
previousState,
{quantity:this.state.quantity+1},
{quantity:this.state.quantity+1},
)

于是后面覆蓋前面的操作，最終購買數量只加1，此時可以使用另一個函數作為參數的setState，這個函數有兩個參數，第一個參數是當前的新狀態（本次組件狀態更新后的狀態）的前一個狀態preState（本次組件狀態修改前的狀態），第二個參數是當前新的props。示列如下：

//正確
this.setState((preState,props)=>({
counter:preState.quantity+1
}))

3、state的更新時一個合并的過程

當調用ssetState（）修改組件的狀態時，只需要傳入發生改變的state，而不是完整的state，因為組件state的更新時一個合并的過程，列如，一個組件的狀態為：

this.state({
title:'React',
content:'React is an wondeful JS library'
})

當只需要修改title時，只需要將修改的title傳給setState即可：

this.setState({title:'ReactJs'});

react會合并新的title到原來的狀態，同時保留原來狀態的content，最終合并state為：

this.state({
title:'ReactJs,
content:''React is an wondeful Js library
}

關于“react中獲取state的方法”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

本文標題：react中獲取state的方法-創新互聯
標題路徑：http://www.yijiale78.com/article44/psohe.html

成都網站建設公司_創新互聯，為您提供關鍵詞優化、做網站、標簽優化、網站導航、軟件開發、營銷型網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯