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

方法：1、利用「const [arr, setArr]=useState([改變值])」修改State值；2、建立一個新的數組，並將原始數組的值賦值給新數組，並用「setState(新數組)」修改State，將堆疊中原始數組所指向的位址改變即可。

本教學操作環境：Windows10系統、react17.0.1版、Dell G3電腦。

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

React中預設淺監聽，當State值為物件時，堆疊中存的是物件的參考（位址），setState改變的是堆中的資料

所以此時setArr(arr) 後，堆疊中的位址還是原位址，React淺監聽到位址沒變，故會認為State並未改變，故沒有重渲染頁面

解決

想法：將堆疊中原始arr所指向的位址改變即可

##範例如下：

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

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

2）新建立一個陣列newArr，將原始數組的值賦值給新數組，並setState(newArr)

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

利用ES6的拓展符

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

推薦學習：《

react影片教學》

以上是react中usestate改變值不渲染怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章！