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ì)象，必須保證子組件是類組件，函數(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與Redux之?dāng)?shù)組處理講解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
這篇文章主要給大家介紹了關(guān)于React中如何引入Angular組件的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-08-08
這篇文章主要介紹了詳解react-redux插件入門，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
React?Context?變遷及背后實(shí)現(xiàn)原理詳解
這篇文章主要為大家介紹了React?Context?變遷及背后實(shí)現(xiàn)原理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
React+Ant Design前端實(shí)現(xiàn)讀取與導(dǎo)出Excel文件
在實(shí)際業(yè)務(wù)場(chǎng)景中,我們經(jīng)常需要處理 Excel 文件的導(dǎo)入導(dǎo)出,本文將以 React + Ant Design 項(xiàng)目為例,演示如何通過(guò) xlsx 庫(kù)實(shí)現(xiàn)以下功能,希望對(duì)大家有所幫助2025-08-08
React從react-router路由上做登陸驗(yàn)證控制的方法
本篇文章主要介紹了React從react-router路由上做登陸驗(yàn)證控制的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
前兩章講到了，react 在 render 階段的 completeUnitWork 執(zhí)行完畢后，就執(zhí)行 commitRoot 進(jìn)入到了 commit 階段，本章將講解 commit 階段執(zhí)行過(guò)程源碼2022-11-11
這篇文章主要介紹了react國(guó)際化react-intl的使用,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
react中將html字符串渲染到頁(yè)面的實(shí)現(xiàn)方式
這篇文章主要介紹了react中將html字符串渲染到頁(yè)面的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
react使用websocket實(shí)時(shí)通信方式
這篇文章主要介紹了react使用websocket實(shí)時(shí)通信方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09