问题代码

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

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐