關(guān)于this.setState更新的問題

darkbug 發(fā)布于2019-08-20 16:28 / 3089人閱讀

摘要：是異步，所以在之后立即調(diào)用是獲取不到最新的數(shù)據(jù)的，那么怎么獲取最新的數(shù)據(jù)呢下面介紹三個(gè)方法回調(diào)函數(shù)在之后去函數(shù)中調(diào)用，此時(shí)的已經(jīng)更新將放入函數(shù)中在函數(shù)中，在之后是立即更新的，所以也可以獲取到更新后的數(shù)據(jù)。

this.setState是異步，所以在this.setState之后立即調(diào)用this.state是獲取不到最新的數(shù)據(jù)的，那么怎么獲取最新的數(shù)據(jù)呢？下面介紹三個(gè)方法：

1.回調(diào)函數(shù)callback

this.setState({
  val: this.state.val+1
}, () => {
  console.log(this.state.val)
});

2.componentDidUpdate

componentDidUpdate(){
    console.log(this.state.val);
}

在this.setState之后去componentDidUpdate函數(shù)中調(diào)用，此時(shí)的this.state已經(jīng)更新

3.將this.setState放入setTimeout函數(shù)中

let self = this;
setTimeout(function () {
  self.setState({
    val:self.state.val+1
  });
  console.log(self.state.val);
})

在setTimeout函數(shù)中，在this.setState之后this.state是立即更新的，所以也可以獲取到更新后的數(shù)據(jù)。

GPU云服務(wù)器云服務(wù)器關(guān)于javascript的問題關(guān)于php的問題關(guān)于系統(tǒng)錯(cuò)誤的問題有關(guān)于回調(diào)的問題

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/82934.html

相關(guān)文章

關(guān)于this.setState( )中的數(shù)據(jù)延遲問題

摘要：判斷當(dāng)前是否處于批量更新狀態(tài)，如果是，將當(dāng)前組件加入待更新的組件隊(duì)列中。將組件的暫存隊(duì)列中的進(jìn)行合并，獲得最終要更新的對(duì)象，并將隊(duì)列置為空。執(zhí)行生命周期，根據(jù)返回值判斷是否要繼續(xù)更新。 this.setState( )方法是React.js中最常見的一種方法，利用它可以控制各種狀態(tài)變化，達(dá)到頁面各種交互效果，但是，我們在React開發(fā)中偶爾會(huì)發(fā)現(xiàn)，明明已經(jīng)通過this.setState...

Lorry_Lu 2019-08-26 14:00 評(píng)論0 收藏0
一個(gè)關(guān)于React.Component.setState的問題

摘要：不保證這個(gè)狀態(tài)的更新是立即執(zhí)行的。這個(gè)問題導(dǎo)致如果開發(fā)者在之后立即去訪問可能訪問的不是最新的狀態(tài)。不應(yīng)該被直接更改，而是應(yīng)該新建一個(gè)來表示更新后的狀態(tài)。實(shí)驗(yàn)采用基于控制變量法的對(duì)照試驗(yàn)。至于的問題，留給讀者自己吧。 React組件重新渲染的條件是： B.只要調(diào)用this.setState()就會(huì)發(fā)生重新渲染。 C.必須調(diào)用this.setState()且傳遞不同于當(dāng)前this.setS...

BoYang 2019-08-22 17:01 評(píng)論0 收藏0
從 setState promise 化的探討體會(huì) React 團(tuán)隊(duì)設(shè)計(jì)思想

摘要：我們來從設(shè)計(jì)思想上，和官方團(tuán)隊(duì)的回應(yīng)上，了解一下否決理由。此外，還有一個(gè)方法新的接口設(shè)計(jì)支持接收一個(gè)回調(diào)函數(shù)，當(dāng)其子組件掛載時(shí)，這個(gè)回調(diào)函數(shù)就會(huì)相應(yīng)觸發(fā)。從 setState 那個(gè)眾所周知的小秘密說起... 在 React 組件中，調(diào)用 this.setState() 是最基本的場景。這個(gè)方法描述了 state 的變化、觸發(fā)了組件 re-rendering。但是，也許看似平常的 th...

caiyongji 2019-08-20 19:03 評(píng)論0 收藏0
從 setState promise 化的探討體會(huì) React 團(tuán)隊(duì)設(shè)計(jì)思想

摘要：我們來從設(shè)計(jì)思想上，和官方團(tuán)隊(duì)的回應(yīng)上，了解一下否決理由。此外，還有一個(gè)方法新的接口設(shè)計(jì)支持接收一個(gè)回調(diào)函數(shù)，當(dāng)其子組件掛載時(shí)，這個(gè)回調(diào)函數(shù)就會(huì)相應(yīng)觸發(fā)。從 setState 那個(gè)眾所周知的小秘密說起... 在 React 組件中，調(diào)用 this.setState() 是最基本的場景。這個(gè)方法描述了 state 的變化、觸發(fā)了組件 re-rendering。但是，也許看似平常的 th...

forrest23 2019-08-01 17:31 評(píng)論0 收藏0
setState異步、同步與進(jìn)階

摘要：根本原因在于，并不是真正意義上的異步操作，它只是模擬了異步的行為。而合成事件和生命周期函數(shù)中，是受控制的，其會(huì)將設(shè)置為，從而走的是類似異步的那一套。總結(jié)此處總結(jié)是直接引用了只在合成事件和鉤子函數(shù)中是異步的，在原生事件和中都是同步的。如何使用setState 在 React 日常的使用中，一個(gè)很重要的點(diǎn)就是，不要直接去修改 state。例如：this.state.count = 1是無...

widuu 2019-08-26 13:22 評(píng)論0 收藏0