react中usestate改變值不渲染怎么解決

這篇文章主要介紹“react中usestate改變值不渲染怎么解決”，在日常操作中，相信很多人在react中usestate改變值不渲染怎么解決問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”react中usestate改變值不渲染怎么解決”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

方法：1、利用“const [arr, setArr]=useState([改變值])”修改State值；2、創(chuàng)建一個新的數(shù)組，并將原數(shù)組的值賦值給新數(shù)組，并用“setState(新數(shù)組)”修改State，將棧中原數(shù)組所指向的地址改變即可。

本教程操作環(huán)境：Windows10系統(tǒng)、react17.0.1版、Dell G3電腦。

react中usestate改變值不渲染怎么辦

React中默認(rèn)淺監(jiān)聽，當(dāng)State值為對象時，棧中存的是對象的引用（地址），setState改變的是堆中的數(shù)據(jù)

所以此時 setArr(arr) 后，棧中的地址還是原地址，React淺監(jiān)聽到地址沒變，故會認(rèn)為State并未改變，故沒有重渲染頁面

解決

思路：將棧中原arr所指向的地址改變即可

示例如下：

1）直接setState(要修改的值)

const [arr, setArr] = useState([])
setArr(1)

2）新創(chuàng)建一個數(shù)組newArr，將原數(shù)組的值賦值給新數(shù)組，并setState(newArr)

const [arr, setArr] = useState([])
const newArr = arr.slice(1)
setArr(newArr)

利用ES6的拓展符

const [arr, setArr] = useState([])
setArr([...arr])

到此，關(guān)于“react中usestate改變值不渲染怎么解決”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！