React中的useState如何改變值不重新渲染的問題
用useState改變值不重新渲染的問題
不渲染
const [lists,setLists] =useState([]);
.....
const arr = lists;
arr.splice(index,1) //根據(jù)刪除index下標的這一項
setLists([arr]); //重復(fù)設(shè)置要改變數(shù)組的地址
解決辦法
const [lists,setLists] =useState([]);
.....
const arr = lists;
arr.splice(index,1) //根據(jù)刪除index下標的這一項
setLists([...arr]); //重復(fù)賦值要改變數(shù)組的地址
react中數(shù)組如果引用地址不變，是不觸發(fā)重新渲染的，但是值是設(shè)置進去了
或
const [lists,setLists] =useState([]);
.....
const arr = [...lists]; //克隆的時候改變地址
arr.splice(index,1)
setLists(arr);
這里要根據(jù)react的渲染機制源碼，因為react 會判斷舊狀態(tài)和新狀態(tài)是否有變化，如果沒有變化就不渲染，所以要改變地址告訴render 是新狀態(tài)要重新渲染
React踩坑使用useState改變值之后拿不到值問題
最近在項目中發(fā)現(xiàn)了一個問題，在使用useState修改值之后，拿不到修改后的值，能肯定的是肯定修改了，不然頁面會空白，但是拿不到數(shù)據(jù)，就很無奈。
最后發(fā)現(xiàn)，函數(shù)式組件使用useState設(shè)置值的方法也是一個異步的方法，而直接輸出是同步的，但是還是拿不到值
這個加上await之后保證fectchData函數(shù)執(zhí)行完成之后在輸出，應(yīng)該就會有值，但是輸出還是{}
無奈發(fā)現(xiàn)，useEffect里面的立即執(zhí)行函數(shù)只會執(zhí)行一次，因為第二個參數(shù)是空數(shù)組，導(dǎo)致它沒有監(jiān)聽任何數(shù)據(jù)的值，就相當于類式組件中的componentDidMount鉤子，因此只會執(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é)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
react事件對象無法獲取offsetLeft,offsetTop,X,Y等元素問題及解決
這篇文章主要介紹了react事件對象無法獲取offsetLeft,offsetTop,X,Y等元素問題及解決方案，具有很好的參考價值，希望對大家有所幫助。2022-08-08
解決React報錯Cannot assign to 'current'
這篇文章主要為大家介紹了React報錯Cannot assign to 'current' because it is a read-only property的解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
React狀態(tài)管理之Zustand的實現(xiàn)示例
Zustand是一個輕量級的狀態(tài)管理庫,它提供了一種簡單而強大的方式來管理應(yīng)用的全局狀態(tài),同時避免了傳統(tǒng)狀態(tài)管理庫中的復(fù)雜性,下面就來詳細的介紹一下Zustand的使用,感興趣的可以了解一下2025-12-12
React Antd Select組件輸入搜索時調(diào)用接口方式
為優(yōu)化Select組件中文輸入時的接口調(diào)用,使用lodash.debounce實現(xiàn)防抖,避免每輸入一個字母即觸發(fā)請求,待用戶點擊空格完成輸入后,再調(diào)用接口獲取數(shù)據(jù),提升性能與用戶體驗2025-08-08
本文主要介紹了react使用.env文件管理全局變量的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
這篇文章主要介紹了React Hook的使用示例，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下2021-04-04
下面小編就為大家?guī)硪黄猺eact.js CMS 刪除功能的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
本文主要介紹了React 點擊刪除列表中對應(yīng)項的方法。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了VSCode搭建React Native環(huán)境，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
Immutable.js出自Facebook，是最流行的不可變數(shù)據(jù)結(jié)構(gòu)的實現(xiàn)之一。它實現(xiàn)了完全的持久化數(shù)據(jù)結(jié)構(gòu)，使用結(jié)構(gòu)共享。所有的更新操作都會返回新的值，但是在內(nèi)部結(jié)構(gòu)是共享的，來減少內(nèi)存占用2022-09-09