快捷導(dǎo)航

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

更新時間：2024年03月12日 09:28:15 作者：大盜夕落

這篇文章主要介紹了React中的useState如何改變值不重新渲染的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

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

不渲染

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

解決辦法

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

react中數(shù)組如果引用地址不變，是不觸發(fā)重新渲染的，但是值是設(shè)置進(jìn)去了

或

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ù)的值，就相當(dāng)于類式組件中的componentDidMount鉤子，因此只會執(zhí)行一次

修改代碼為：

  useEffect( () => {
      fetchData()
    },[])
 
    useEffect(() => {
      // 監(jiān)聽cityArr的值，第一次肯定為{}，等到它有數(shù)據(jù)之后，在輸出
      if(Object.keys(cityArr).length !== 0){
        console.log(cityArr);
        listRef.current.measureAllRows()
      }
    },[cityArr])