用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 是新状态要重新渲染

 

上一篇:一、基础知识 React API 一览


下一篇:浅谈connect,withRouter,history,useState,useEffect