react hook 使用 useState 更新数组,无法更新问题

·  阅读 184

问题描述:

const [arrData, setArrData] = useState([]);
const removeAttItem = (index) => {
    let data=arrData;
    data.splice(index, 1)
    setArrData(data);
}
复制代码

根据索引删除数组,数组不更新

原因分析:

这个涉及到可变对象和不可变对象的知识,在vue和react中,如果更新可变对象时,可能会引起视图更新,这是因为,vue和react默认都是浅监听,只会监听数据的第一层,内层数据发生改变,并不会监听到。

解决方法:

这里应该先将原数组浅拷贝,赋值给新数组,再修改新数组(不影响原状态),将修改后的新数组使用setValue传递进去,这样就会引起视图更新。

const removeAttItem = (index) => {
    let data=[...arrData]; // 解构一遍生成新的数组,相当于浅拷贝,这样才能触发更新数据
    data.splice(index, 1)
    setArrData(data);
}
复制代码
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改