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