React中異步數(shù)據(jù)更新不及時(shí)問(wèn)題及解決
react異步數(shù)據(jù)更新不及時(shí)問(wèn)題
最近在學(xué)習(xí)react的過(guò)程中，遇到了個(gè)問(wèn)題，當(dāng)我使用useState這個(gè)hook的時(shí)候，發(fā)現(xiàn)我們這個(gè)方法更新數(shù)據(jù)他是異步更新的，數(shù)據(jù)不會(huì)及時(shí)同步上我們的頁(yè)面，在仔細(xì)的研究下，找到了以下
解決方法
const [value,setValue] = useState([]);
const changeValue = ()=>{
setValue(data)
console.log(value) //在此處輸出會(huì)出現(xiàn)不及時(shí)更新問(wèn)題，不會(huì)同步到頁(yè)面上
}
//利用useEffect這個(gè)hook來(lái)監(jiān)聽(tīng)數(shù)據(jù)的變化再去輸出或者是調(diào)用
useEffect(()=>{
console.log(value)//這樣就可以解決更新不及時(shí)的問(wèn)題啦
},[value])react異步更新、尋找DOM
1.react異步更新
react異步更新指的是this.setState()是異步更新的，異步更新之后怎么獲取更新之后值
有兩種方法：
1.1 componentDidUpdate生命周期函數(shù)獲取更新之后的值
componentDidUpdate:已經(jīng)更新生命周期函數(shù)中打印state中的數(shù)據(jù)是更新后的值
componentDidUpdate(prevProps, prevState) {
console.log(2, prevState.name, this.state.name) // 張三, 李四
}1.2 在this.setState()的回調(diào)函數(shù)中獲取更新后的值
this.setState的第二個(gè)參數(shù)是可選的回調(diào)，是異步更新完成時(shí)的回調(diào)，在該回調(diào)函數(shù)中獲取更新后的值
this.setState({
name: "李四"
}, ()=>{
// this.setState的第二個(gè)參數(shù)是可選的回調(diào), 是異步更新完成時(shí)的回調(diào) (與小程序setData相同)
console.log(3, this.state.name) // 李四
// 注意: this.setState數(shù)據(jù)更新屬于異步更新, 此處打印是更新前的值
console.log(1, this.state.name) // 張三2.react查找DOM
在react組件中獲取DOM元素的三種方式：
2.1 給標(biāo)簽設(shè)置ref屬性
給標(biāo)簽設(shè)置ref屬性，通過(guò)this.refs調(diào)用(老版本語(yǔ)法，將要廢除)
<h1 ref="myH1"></h1> this.refs.myH1
2.2 在構(gòu)造器中創(chuàng)建ref全局變量
在構(gòu)造器中創(chuàng)建ref全局變量，在標(biāo)簽中ref屬性動(dòng)態(tài)綁定這個(gè)全局變量，通過(guò)全局變量的current字段調(diào)用
constructor(props) {
super(props);
this.d2 = React.createRef()
}
<div ref={this.d2}>2</div>
console.log(this.d2.current);2.3 在標(biāo)簽ref屬性綁定函數(shù)
在標(biāo)簽ref屬性綁定函數(shù)，在函數(shù)中定義全局變量賦值，通過(guò)全局變量調(diào)用
<h3 ref={ ele => this.myH3 = ele }></h3>
this.myH3注意：
1.在父組件中用ref獲取子組件對(duì)象，必須保證子組件是類(lèi)組件，函數(shù)式組件獲取結(jié)果是undefined
2.父組件中子組件標(biāo)簽綁定ref屬性，父組件使用ref獲取子組件對(duì)象后，可以對(duì)子組件狀態(tài)數(shù)據(jù)和函數(shù)執(zhí)行調(diào)用和修改
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了React 父組件和子組件的數(shù)據(jù)傳輸?shù)南嚓P(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下2021-04-04
這篇文章主要介紹了React中父子組件通信詳解，在父組件中，為子組件添加屬性數(shù)據(jù)，即可實(shí)現(xiàn)父組件向子組件通信，文章通過(guò)圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2023-03-03
React如何實(shí)現(xiàn)全屏監(jiān)聽(tīng)Esc鍵
這篇文章主要介紹了React如何實(shí)現(xiàn)全屏監(jiān)聽(tīng)Esc鍵，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
React如何將組件渲染到指定DOM節(jié)點(diǎn)詳解
這篇文章主要給大家介紹了關(guān)于React如何將組件渲染到指定DOM節(jié)點(diǎn)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)下吧。2017-09-09
react?hooks?計(jì)數(shù)器實(shí)現(xiàn)代碼
這篇文章主要介紹了react?hooks計(jì)數(shù)器實(shí)現(xiàn)代碼，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08
近兩年前端技術(shù)的發(fā)展如火如荼,大量的前端項(xiàng)目都在使用或轉(zhuǎn)向 Vue 和 React 的陣營(yíng),由前端渲染頁(yè)面的單頁(yè)應(yīng)用占比也越來(lái)越高,這篇文章主要給大家介紹了關(guān)于React全局狀態(tài)管理的三種底層機(jī)制,需要的朋友可以參考下2021-09-09
我們組的前端妹子在組內(nèi)分享時(shí)談到了 react 的鉤子，趁此機(jī)會(huì)我也對(duì)我所理解的內(nèi)容進(jìn)行下總結(jié)，方便更多的同學(xué)了解。在 React 的 v16.8.0 版本里添加了 hooks 的這種新的 API，我們非常有必要了解下他的使用方法，并能夠結(jié)合我們的業(yè)務(wù)編寫(xiě)幾個(gè)自定義的 hooks。2021-05-05
這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)原生下拉刷新，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家介紹了useEffect支持async及await的使用方式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
react組件中過(guò)渡動(dòng)畫(huà)的問(wèn)題解決
這篇文章主要為大家介紹了react組件中過(guò)渡動(dòng)畫(huà)的問(wèn)題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09