用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 是新状态要重新渲染
posted on 2020-10-12 11:30 ranyonsue 阅读(6594) 评论(2) 编辑 收藏 举报