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

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

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

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

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

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

解決

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

示例如下：

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

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

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

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

利用ES6的拓展符

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

推薦學(xué)習(xí)：《react視頻教程》