react使用antd-design中select不能及時(shí)刷新問(wèn)題及解決
react使用antd-design中select不能及時(shí)刷新
react是當(dāng)前最流行的js框架之一，與之相匹配的antd也是當(dāng)下最流行的ui框架之一，最近開(kāi)發(fā)遇到一個(gè)之前沒(méi)有遇到的問(wèn)題，關(guān)于antd的select刷新不及時(shí)的問(wèn)題，
當(dāng)時(shí)的業(yè)務(wù)環(huán)境是具有多個(gè)商務(wù)錄單，主播選擇的業(yè)務(wù).每個(gè)錄單的平臺(tái)不同主播也不一樣，主播集合是采用的循環(huán)渲染形式.
因此由于是采用的ts的寫法，每次的select中要進(jìn)行預(yù)渲染，每次更改當(dāng)前平臺(tái)，對(duì)應(yīng)的下拉不能及時(shí)更新，加key不行，setAnchor(anchor)不行，在useEffect()中監(jiān)聽(tīng)anchor也不行，后來(lái)使用深拷貝內(nèi)存地址更替變量才引起視圖刷新，由于react寫的不多，第一次遇見(jià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])總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
React 中的事件，是對(duì)原生事件的封裝，叫做合成事件。這篇文章主要通過(guò)幾個(gè)簡(jiǎn)單的示例為大家詳細(xì)介紹一下React中的合成事件，感興趣的可以了解一下2023-02-02
詳解React-Native解決鍵盤遮擋問(wèn)題（Keyboard遮擋問(wèn)題）
本篇文章主要介紹了React-Native解決鍵盤遮擋問(wèn)題（Keyboard遮擋問(wèn)題），具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
TypeScript在React中的應(yīng)用技術(shù)實(shí)例解析
這篇文章主要為大家介紹了TypeScript在React中的應(yīng)用技術(shù)實(shí)例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
React Fiber 是 React 16 中引入的新的協(xié)調(diào)引擎或重寫的核心算法, 真針Fiber的一個(gè)重要的核心概念Fiber Node,這次主要的研究對(duì)象是： 如何從使用者/學(xué)習(xí) 者角度 在js 代碼上 拿到fiber 樹結(jié)構(gòu)的信息,,需要的朋友可以參考下2024-04-04
React類組件中super()和super(props)的區(qū)別詳解
這篇文章給大家詳細(xì)介紹了React類組件中super()和super(props)有什么區(qū)別,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-01-01
React修改數(shù)組對(duì)象的注意事項(xiàng)及說(shuō)明
這篇文章主要介紹了React修改數(shù)組對(duì)象的注意事項(xiàng)及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
React應(yīng)用框架Dva數(shù)據(jù)流向原理總結(jié)分析
這篇文章主要為大家介紹了React 應(yīng)用框架Dva數(shù)據(jù)流向原理總結(jié)分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
react系列從零開(kāi)始_簡(jiǎn)單談?wù)剅eact
下面小編就為大家?guī)?lái)一篇react系列從零開(kāi)始_簡(jiǎn)單談?wù)剅eact。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
使用React?Router?v6?添加身份驗(yàn)證的方法
這篇文章主要介紹了使用React?Router?v6?進(jìn)行身份驗(yàn)證完全指南,本文將演示如何使用React?Router?v6創(chuàng)建受保護(hù)的路由以及如何添加身份驗(yàn)證，需要的朋友可以參考下2022-05-05
本篇文章主要介紹了淺談React和Redux的連接react-redux，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12