用React 中的useState改變值不重新渲染的問題

不渲染

const [lists,setLists] =useState([]); ..... const arr = lists; arr.splice(index,1) //根據刪除index下標的這一項 setLists([arr]); //重復設置要改變數組的地址

解決辦法：

const [lists,setLists] =useState([]); ..... const arr = lists; arr.splice(index,1) //根據刪除index下標的這一項 setLists([...arr]); //重復賦值要改變數組的地址

react中數組如果引用地址不變，是不觸發重新渲染的，但是值是設置進去了

 

或者

const [lists,setLists] =useState([]); ..... const arr = [...lists]; //克隆的時候改變地址 arr.splice(index,1) setLists(arr);

這里要根據react的渲染機制源碼，因為react 會判斷舊狀態和新狀態是否有變化，如果沒有變化就不渲染，所以要改變地址告訴render 是新狀態要重新渲染