React hooks useEffect 监听数组变化 不生效问题
useEffect 会检测两次监测的对象 内存地址是否相同,相同就跳过,不同才会执行useEffect。useEffect监听数据变化时,只有在数组元素类型为基本数据类型时可以起到作用。splice函数调用后 , items 变化但是useEffect 并未执行。上述数组直接赋值修改,导致setItems之后items引用未变。问题并不是出现在useEffect上。useEffect监听的可能是引
·
问题代码
const [items, setItems] = useState(['A', 'B', 'C']);
useEffect(() => {
console.log({ items })
}, [items])
const splice = (index) =>{
let _items = items;
_items.splice(index,1);
setItems(_items);
}
splice函数调用后 , items 变化但是useEffect 并未执行
解释
问题并不是出现在useEffect上
useEffect监听的可能是引用
上述数组直接赋值修改,导致setItems之后items引用未变
所以要用深拷贝
const [items, setItems] = useState(['A', 'B', 'C']);
useEffect(() => {
console.log({ items })
}, [items])
const splice = (index) =>{
//let _items = items; 修改为下述两种
let _items = JSON.parse(JSON.stringify(items));
//或者
let _items = [...items];
_items.splice(index,1);
setItems(_items);
}
useEffect监听数据变化时,只有在数组元素类型为基本数据类型时可以起到作用。
useEffect 会检测两次监测的对象 内存地址是否相同,相同就跳过,不同才会执行useEffect
更多推荐
已为社区贡献1条内容
所有评论(0)