React中的useState如何改變值不重新渲染的問題
用useState改變值不重新渲染的問題
不渲染
const [lists,setLists] =useState([]);
.....
const arr = lists;
arr.splice(index,1) //根據(jù)刪除index下標(biāo)的這一項(xiàng)
setLists([arr]); //重復(fù)設(shè)置要改變數(shù)組的地址
解決辦法
const [lists,setLists] =useState([]);
.....
const arr = lists;
arr.splice(index,1) //根據(jù)刪除index下標(biāo)的這一項(xiàng)
setLists([...arr]); //重復(fù)賦值要改變數(shù)組的地址
react中數(shù)組如果引用地址不變，是不觸發(fā)重新渲染的，但是值是設(shè)置進(jìn)去了
或
const [lists,setLists] =useState([]);
.....
const arr = [...lists]; //克隆的時(shí)候改變地址
arr.splice(index,1)
setLists(arr);
這里要根據(jù)react的渲染機(jī)制源碼，因?yàn)?strong>react 會(huì)判斷舊狀態(tài)和新狀態(tài)是否有變化，如果沒有變化就不渲染，所以要改變地址告訴render 是新狀態(tài)要重新渲染
React踩坑使用useState改變值之后拿不到值問題
最近在項(xiàng)目中發(fā)現(xiàn)了一個(gè)問題，在使用useState修改值之后，拿不到修改后的值，能肯定的是肯定修改了，不然頁面會(huì)空白，但是拿不到數(shù)據(jù)，就很無奈。
最后發(fā)現(xiàn)，函數(shù)式組件使用useState設(shè)置值的方法也是一個(gè)異步的方法，而直接輸出是同步的，但是還是拿不到值
這個(gè)加上await之后保證fectchData函數(shù)執(zhí)行完成之后在輸出，應(yīng)該就會(huì)有值，但是輸出還是{}
無奈發(fā)現(xiàn)，useEffect里面的立即執(zhí)行函數(shù)只會(huì)執(zhí)行一次，因?yàn)榈诙€(gè)參數(shù)是空數(shù)組，導(dǎo)致它沒有監(jiān)聽任何數(shù)據(jù)的值，就相當(dāng)于類式組件中的componentDidMount鉤子，因此只會(huì)執(zhí)行一次
修改代碼為：
useEffect( () => {
fetchData()
},[])
useEffect(() => {
// 監(jiān)聽cityArr的值，第一次肯定為{}，等到它有數(shù)據(jù)之后，在輸出
if(Object.keys(cityArr).length !== 0){
console.log(cityArr);
listRef.current.measureAllRows()
}
},[cityArr])
如此，就解決了拿不到數(shù)據(jù)的問題
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用useImperativeHandle時(shí)父組件第一次沒拿到子組件的問題
這篇文章主要介紹了使用useImperativeHandle時(shí)父組件第一次沒拿到子組件的問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
具體來說這是一種react非受控組件，其狀態(tài)是在input的react內(nèi)部控制，不受調(diào)用者控制?？梢允褂檬芸亟M件來實(shí)現(xiàn)。下面就說說這個(gè)React中的受控組件與非受控組件的相關(guān)知識(shí)，感興趣的朋友一起看看吧2022-09-09
React中jquery引用的實(shí)現(xiàn)方法
這篇文章主要介紹了React中jquery引用的實(shí)現(xiàn)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
React通過conetxt實(shí)現(xiàn)多組件傳值功能
Context 提供了一種在組件之間共享此類值的方式，而不必顯式地通過組件樹的逐層傳遞 props。本文給大家介紹React通過conetxt實(shí)現(xiàn)多組件傳值功能，感興趣的朋友一起看看吧2021-10-10
React?createRef循環(huán)動(dòng)態(tài)賦值ref問題
這篇文章主要介紹了React?createRef循環(huán)動(dòng)態(tài)賦值ref問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
react中使用better-scroll滾動(dòng)插件的實(shí)現(xiàn)示例
滾動(dòng)在很多地方都可以使用，本文主要介紹了react中使用better-scroll滾動(dòng)插件的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
Redux 是React最常用的集中狀態(tài)管理工具,本文主要介紹了React狀態(tài)管理的簡明指南,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01
這篇文章主要為大家介紹了ahooks整體架構(gòu)及React工具庫的源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
react項(xiàng)目引入antd框架方式以及遇到的一些坑
這篇文章主要介紹了react項(xiàng)目引入antd框架方式以及遇到的一些坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
React?Hooks?實(shí)現(xiàn)的中文輸入組件
這篇文章主要為大家介紹了React?Hooks實(shí)現(xiàn)的中文輸入組件示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05