问题代码

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

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐